<!--
 * @Author: zengyufei
 * @LastEditors: zengyufei
 * @Description: 
 * 惠州市寻墨科技有限公司
-->
<!DOCTYPE html>
<html>
    <head>
        <title>代码生成气</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" href="./element.css" />
        <script src="./vue.js"></script>
        <script src="./element.js"></script>
        <script src="./jquery.min.js"></script>
        <script src="./ace.min.js"></script>
        <script src="./theme-monokai.min.js"></script>
        <script src="./mode-javascript.min.js"></script>
        <script src="./mode-xml.min.js"></script>
        <script src="./mode-mysql.min.js"></script>
        <script src="./mode-java.min.js"></script>
        <!-- <script src="./worker-xml.js"></script> -->
        <style>
            body {
                margin: 0 0;
                background-color: rgb(206, 203, 203);
            }
            .header {
                height: 220px;
                background-color: white;
            }
            .contarin {
                padding-top: 18px;
                height: auto;
                background-color: white;
            }
            .el-form .el-form-item__content {
                margin-left: 0px;
            }
            .el-form .el-form-item .c-label {
                float: left;
                font-size: 14px;
                color: #606266;
                padding: 0 12px 0 0;
                box-sizing: border-box;
                text-align: right;
                line-height: 28px;
                width: 180px !important;
            }
            /* .el-form .el-input {
                width: 550px;
            } */
            .el-form .el-textarea__inner {
                width: 900px;
            }
            .br {
                display: block;
                margin: 14px 0;
            }
            .el-col .el-radio-group {
                margin: 5px 0 5px 5px;
            }
            .el-col .span-150 {
                display: inline-table;
                width: 118px;
            }
            .testTemplate {
                height: 100%;
                padding: 0!important;
                overflow: hidden;
                position: relative;
            }
        </style>
    </head>
    <body>
        <div class="vue-box" style="overflow-x: hidden">
            <div class="header" v-if="showType !== 0">
                <el-row>
                    <el-col :span="24" style="margin: 5px 0 5px 5px">
                        <span><b>表名: {{genTable.tableName}}</b></span>
                    </el-col>
                    <el-col :span="24" style="margin: 5px 0 5px 5px">
                        <span>实体类: {{genTable.entityName}}</span>
                        <span>作者: {{genTable.authorName}}</span>
                    </el-col>
                    <el-col :span="24">
                        <div style="height: 40px"></div>
                    </el-col>
                    <el-col :offset="8" :span="8">
                        <el-steps :active="showType-1" finish-status="success">
                            <el-step title="生成信息">
                                <template slot="title">
                                    <a href="javascript:this.app.showType = 1;" style="text-decoration: none">生成信息</a>
                                </template>
                            </el-step>
                            <el-step title="字段信息">
                                <template slot="title">
                                    <a href="javascript:this.app.gotoShowTypeTwo();" style="text-decoration: none">字段信息</a>
                                </template>
                            </el-step>
                            <el-step title="代码预览">
                                <template slot="title">
                                    <a href="javascript:this.app.showCodeView();" style="text-decoration: none">代码预览</a>
                                </template>
                            </el-step>
                            <el-step title="立即生成">
                                <template slot="title">
                                    <a href="javascript:this.app.showCodeDownload();" style="text-decoration: none">立即生成</a>
                                </template>
                            </el-step>
                        </el-steps>
                    </el-col>
                    <el-col v-if="showType >= 2" style="padding-left: 10px;">
                        <el-button type="success" @click="showTemplateAllParamsPage" size="mini">查看模板参数</el-button>
                        <el-button type="warning" @click="showTestTemplatePage" size="mini">测试模板</el-button>
                    </el-col>
                </el-row>
            </div>
            <div style="height: 18px"></div>
            <div class="contarin" style="padding-bottom: 70px;">
                <!-- 代码生成列表 -->
                <div class="zero" style="height: 800px" v-if="showType === 0">
                    <div class="c-panel">
                        <el-form ref="table-search-form" @submit.native.prevent size="mini" label-width="150px" label-position="right" :inline="true">
                            <el-form-item label="表名：">
                                <el-input v-model="genTableSearcher.tableName" placeholder="请输入搜索" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="表注释：">
                                <el-input v-model="genTableSearcher.tableComment" placeholder="请输入搜索" clearable></el-input>
                            </el-form-item>
                            <el-button type="primary" icon="el-icon-search" size="mini" @click="genTableSearcher.pageNo = 1; getGenTable()">查询</el-button>
                            <el-button type="info" icon="el-icon-refresh" size="mini" @click="getGenTable(true)">重置</el-button>
                        </el-form>
                        <div style="margin: 20px 0 5px 10px">
                            <el-button type="warning" icon="el-icon-add" size="mini" @click="showAddTablePage()">新增</el-button>
                        </div>
                        <el-table
                            class="genTables"
                            ref="genTables"
                            :data="genTables"
                            size="mini"
                            border
                            highlight-current-row
                            @current-change="handleCurrentChange"
                            stripe
                            @sort-change="sort"
                            @row-dblclick="handlerGenTableDblclick"
                        >
                            <!-- <el-table-column type="selection" min-width="45"></el-table-column> -->
                            <el-table-column label="序号" width="45">
                                <template slot-scope="scope">{{indexMethod(scope.$index, genTableSearcher)}}</template>
                            </el-table-column>
                            <el-table-column label="表名" prop="tableName"></el-table-column>
                            <el-table-column label="表注释" prop="tableComment"></el-table-column>
                            <el-table-column label="操作" width="230" fixed="right">
                                <template slot-scope="s">
                                    <el-button size="mini" type="primary" icon="el-icon-edit" @click="showUpdateGenTable(s.row)">修改</el-button>
                                    <el-button size="mini" type="danger" icon="el-icon-delete" @click="delGenTable(s.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="page-box" style="text-align: right">
                            <el-pagination
                                background
                                layout="total, prev, pager, next, sizes, jumper"
                                :current-page="genTableSearcher.pageNo"
                                :page-size="genTableSearcher.pageSize"
                                :total="genTableCount"
                                :page-sizes="[1, 10, 20, 30, 40, 50, 100]"
                                @current-change="changeGenTablePage"
                                @size-change="changeGenTablePageSize"
                                @change="f5()"
                            >
                            </el-pagination>
                        </div>
                    </div>
                </div>
                <!-- 生成信息 -->
                <div class="first" v-if="showType === 1" style="padding-bottom: 70px">
                    <el-form ref="form" :model="genTable" label-width="150px" label-position="right" size="mini">
                        <el-divider content-position="left"><b>基础信息</b></el-divider>
                        <el-row>
                            <z-input :span="12" label="表名" v-model="genTable.tableName" tips="表名" required disabled></z-input>
                            <z-input :span="12" label="实体名称" v-model="genTable.entityName" tips="实体名称" required ></z-input>
                            <z-input :span="12" label="入参名称" v-model="genTable.varName" tips="入参名称" required ></z-input>
                            <z-input :span="12" label="作者" v-model="genTable.authorName" tips="作者" required ></z-input>
                            <z-input :span="12" label="表注释" v-model="genTable.tableComment" tips="表注释" required ></z-input>
                            <z-input :span="12" label="javadoc注释" v-model="genTable.swaggerComment" tips="javadoc注释" required ></z-input>
                            <el-col :span="24">
                                <el-form-item label="备注" :rules="[{ required: true, message: '请输入备注' }, ]">
                                    <el-input type="textarea" :rows="4" v-model="genTable.remark" clearable></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-divider content-position="left"><b>生成信息</b></el-divider>
                        <el-row>
                            <z-input :span="12" label="服务名" v-model="genTable.serviceName" tips="微服务名称" required></z-input>
                            <z-input :span="12" label="父包名" v-model="genTable.packageName" tips="父包名" required></z-input>
                            <z-input :span="12" label="模块名" v-model="genTable.moduleName" tips="模块名" required></z-input>
                            <z-input :span="12" label="子包名" v-model="genTable.subPackageName" tips="模块名" required></z-input>
                            <z-input :span="12" label="实体父类" v-model="genTable.entitySuperClassName" tips="实体父类" required></z-input>
                            <z-input :span="12" label="mapper父类" v-model="genTable.mapperSuperClassName" tips="mapper父类" required></z-input>
                            <z-input :span="12" label="service父类" v-model="genTable.serviceSuperClassName" tips="service父类" required></z-input>
                            <z-input :span="12" label="serviceImpl父类" v-model="genTable.serviceImplSuperClassName" tips="serviceImpl父类" required></z-input>
                            <z-radio :span="12" label="@DS" v-model="genTable.dsFlag" tips="ServiceImpl类是否标记@DS注解，加上该注解后，sql操作会自动切换数据源" required :children="{'1': '是', '0':'否'}"> </z-radio>
                            <!-- <z-input :span="12" label="数据源名" v-model="genTable.dsName" tips="数据源名" required ></z-input> -->
                            <z-radio :span="12" label="@TenantLine" v-model="genTable.tenderFlag" tips="Mapper类是否标记@TenantLine注解，加上该注解sql操作不会自动拼接租户ID" required :children="{'1': '是', '0':'否'}"> </z-radio>
                            <z-radio :span="12" label="Lombok" v-model="genTable.lombokFlag" tips="实体类是否使用@Data注解" required :children="{'1': '是', '0':'否'}"> </z-radio>
                            <z-radio :span="12" label="链式模型" v-model="genTable.chainFlag" tips="实体类是否使用@Accessors(chain = true)注解" required :children="{'1': '是', '0':'否'}"> </z-radio>
                            <z-radio :span="12" label="生成字段常量" v-model="genTable.constFlag" tips="生成字段常量" required :children="{'1': '是', '0':'否'}"> </z-radio>
                            <z-radio :span="12" label="生成方式" v-model="genTable.genFlag" tips="生成方式" required>
                                <el-radio label="0">打包下载</el-radio>
                            </z-radio>
                        </el-row>

                        <el-divider content-position="left" v-if="backKvList&&backKvList.length>0"><b>后端自定义信息</b></el-divider>
                        <el-row>
                            <el-col :span="12">
                                <template v-for="kv in backKvList">
                                    <el-form-item :label="kv.value.name">
                                        <el-input v-model="kv.value.value" clearable></el-input>
                                    </el-form-item>
                                </template>
                            </el-col>
                        </el-row>
                        <!-- <el-row>
                            <el-col :span="24">
                                <el-form-item label="后端生成路径" :rules="[{ required: true, message: '请输入后端生成路径' }, ]">
                                    <el-input v-model="genTable.prefixPath" clearable></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="前端生成路径" :rules="[{ required: true, message: '请输入前端生成路径' }, ]">
                                    <el-input v-model="genTable.suffixPath" clearable></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row> -->

                        <el-divider content-position="left"><b>前端信息</b></el-divider>
                        <el-row>
                            <z-input :span="12" label="前端应用名" v-model="genTable.appPackageName" tips="前端应用名" required></z-input>
                            <z-input :span="12" label="前端模块名" v-model="genTable.appModuleName" tips="前端模块名" required></z-input>
                            <z-radio :span="12" label="弹窗方式" v-model="genTable.appPopupType" tips="点击新增或编辑时，弹窗的打开方式" required>
                                <el-radio label="1">对话框</el-radio>
                                <el-radio label="2">抽屉</el-radio>
                                <el-radio label="3">跳转</el-radio>
                            </z-radio>
                            <z-radio :span="12" label="生成模板" v-model="genTable.appTemplateType" tips="生成模板" required>
                                <el-radio label="1">单表</el-radio>
                                <el-radio label="2">树结构</el-radio>
                                <el-radio label="3">主从结构</el-radio>
                            </z-radio>
                            <z-radio :span="12" label="显示新增按钮" v-model="genTable.appAddBtnFlag" tips="显示新增按钮" required :children="{'1': '是', '0':'否'}"> </z-radio>
                            <z-radio :span="12" label="显示编辑按钮" v-model="genTable.appUpdateBtnFlag" tips="显示编辑按钮" required :children="{'1': '是', '0':'否'}"> </z-radio>
                            <z-radio :span="12" label="显示删除按钮" v-model="genTable.appDelBtnFlag" tips="显示删除按钮" required :children="{'1': '是', '0':'否'}"> </z-radio>
                            <z-radio :span="12" label="显示复制按钮" v-model="genTable.appCopyBtnFlag" tips="显示复制按钮" required :children="{'1': '是', '0':'否'}"> </z-radio>
                            <z-radio :span="12" label="显示详情按钮" v-model="genTable.appShowBtnFlag" tips="显示详情按钮" required :children="{'1': '是', '0':'否'}"> </z-radio>
                            <z-input :span="12" label="新增按钮权限" v-model="genTable.appAddBtnCode" tips="新增按钮权限" required btn btn-name="生成" @btn-func="genBtnCode($event, 'add')"></z-input>
                            <z-input :span="12" label="编辑按钮权限" v-model="genTable.appUpdateBtnCode" tips="编辑按钮权限" required btn btn-name="生成" @btn-func="genBtnCode($event, 'update')"></z-input>
                            <z-input :span="12" label="删除按钮权限" v-model="genTable.appDelBtnCode" tips="删除按钮权限" required btn btn-name="生成" @btn-func="genBtnCode($event, 'del')"></z-input>
                            <z-input :span="12" label="复制按钮权限" v-model="genTable.appCopyBtnCode" tips="复制按钮权限" required btn btn-name="生成" @btn-func="genBtnCode($event, 'copy')"></z-input>
                            <z-input :span="12" label="详情按钮权限" v-model="genTable.appShowBtnCode" tips="详情按钮权限" required btn btn-name="生成" @btn-func="genBtnCode($event, 'detail')"></z-input>
                        </el-row>

                        <el-divider content-position="left" v-if="frontKvList&&frontKvList.length>0"><b>前端自定义信息</b></el-divider>
                        <el-row>
                            <el-col :span="12">
                                <template v-for="kv in frontKvList">
                                    <el-form-item :label="kv.value.name">
                                        <el-input v-model="kv.value.value" clearable></el-input>
                                    </el-form-item>
                                </template>
                            </el-col>
                        </el-row>

                        <el-divider content-position="left"><b>SQL信息</b></el-divider>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="菜单所属应用" :rules="[{ required: true, message: '请输入菜单所属应用' }, ]">
                                    <el-select v-model="genTable.parentSystem" placeholder="请选择">
                                        <el-option v-for="item in allSystem" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="上级菜单" :rules="[{ required: true, message: '请输入上级菜单' }, ]">
                                    <el-select v-model="genTable.parentMenuId" placeholder="请选择">
                                        <el-option v-for="item in parentMenus" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <z-input :span="12" label="当前菜单名" v-model="genTable.menuName" tips="当前菜单名" required></z-input>
                            <el-col :span="12">
                                <el-form-item label="菜单图标" :rules="[{ required: true, message: '请输入菜单图标' }, ]">
                                    <el-input v-model="genTable.menuIcon" disabled>
                                        <template slot="prepend"><i :class="genTable.menuIcon" style="font-size: 20px"></i></template>
                                        <el-button slot="append" icon="el-icon-s-grid" @click="showIconSelectPage('3')"></el-button>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-divider content-position="left" v-if="genTable.appTemplateType === '2'"><b>其他信息</b></el-divider>
                        <el-row v-if="genTable.appTemplateType === '2'">
                            <z-input :span="12" label="树字段名称" v-model="genTable.parentIdName" tips="树字段名称" required></z-input>
                        </el-row>
                    </el-form>
                    <div style="padding: 15px 0 5px 0; position: fixed; bottom: 0px; left: 0; width: 100%; display: flex; background-color: white; border: 1px solid #e9e1e1">
                        <div style="margin: 0 auto; text-align: center">
                            <el-button type="primary" size="mini" @click="showType = 0">上一步</el-button>
                            <el-button type="primary" size="mini" @click="updateGenTable">下一步</el-button>
                        </div>
                    </div>
                </div>

                <!-- 字段信息 -->
                <div class="second" v-if="showType === 2">
                    <div class="c-panel">
                        <!-- ------------- 检索参数 ------------- -->
                        <el-form ref="search-form" @submit.native.prevent size="mini" label-width="150px" label-position="right" :inline="true">
                            <el-form-item label="字段名：">
                                <el-input v-model="fieldSearcher.columnName" placeholder="请输入搜索" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="列注释：">
                                <el-input v-model="fieldSearcher.columnComment" placeholder="请输入搜索" clearable></el-input>
                            </el-form-item>
                            <el-button type="primary" icon="el-icon-search" size="mini" @click="fieldSearcher.pageNo = 1; getTableFields()">查询</el-button>
                            <el-button type="info" icon="el-icon-refresh" size="mini" @click="getTableFields(true)">重置</el-button>
                        </el-form>
                        <!-- ------------- 快捷按钮 ------------- -->
                        <!-- <div style="margin: 20px 0 5px 10px">
                            <el-button type="warning" icon="el-icon-delete" size="mini" @click="deleteField()">删除</el-button>
                        </div> -->
                        <!-- ------------- 数据列表 ------------- -->
                        <el-table
                            class="genField"
                            ref="genField"
                            :data="genField"
                            size="mini"
                            border
                            highlight-current-row
                            @current-change="handleCurrentChange"
                            stripe
                            @sort-change="sort"
                            @row-dblclick="handlerFieldDblclick"
                        >
                            <!-- <el-table-column type="selection" min-width="45" fixed></el-table-column> -->
                            <el-table-column label="序号" width="45" fixed>
                                <template slot-scope="scope">{{indexMethod(scope.$index, fieldSearcher)}}</template>
                            </el-table-column>
                            <el-table-column label="列名" prop="columnName" min-width="150" fixed></el-table-column>
                            <el-table-column label="列类型" prop="dataType" min-width="120"></el-table-column>
                            <el-table-column label="默认值" prop="columnDefault" min-width="150"></el-table-column>
                            <el-table-column label="列注释" prop="columnComment" min-width="200"></el-table-column>
                            <el-table-column label="文档注释" prop="columnComment" min-width="200"></el-table-column>

                            <!-- <z-td label="JAVA类型" status="is_update" field-name="javaType" width="140"></z-td> -->
                            <el-table-column label="JAVA类型" prop="javaType" min-width="180">
                                <template slot-scope="s">
                                    <el-select v-if="s.row.is_update" v-model="s.row.javaType" placeholder="请选择">
                                        <el-option v-for="item in javaTypeList" :key="item.value" :value="item.value" :label="item.label"></el-option>
                                    </el-select>
                                    <span v-else v-for="item in javaTypeList" :key="item.value">
                                        <span v-if="s.row.javaType === item.value">{{item.label}}</span>
                                    </span>
                                </template>
                            </el-table-column>
                            <z-td label="java名称" status="is_update" field-name="javaField" width="170"></z-td>
                            <el-table-column label="长度" prop="length"></el-table-column>
                            <z-td label="主键" status="is_update" field-name="pkFlag" type="yn"></z-td>
                            <z-td label="必填" status="is_update" field-name="mustFlag" type="yn"></z-td>
                            <z-td label="逻辑删除" status="is_update" field-name="logicDeleteFlag" type="yn"></z-td>
                            <z-td label="乐观锁" status="is_update" field-name="versionFlag" type="yn"></z-td>
                            <z-td label="自增" status="is_update" field-name="incFlag" type="yn"></z-td>
                            <!-- <z-td label="填充类型" status="is_update" field-name="javaField" type="text"></z-td> -->

                            <el-table-column label="填充类型" prop="fillType" min-width="190">
                                <template slot-scope="s">
                                    <el-select v-if="s.row.is_update" v-model="s.row.fillType" placeholder="请选择" clearable>
                                        <el-option v-for="item in fillTypeList" :key="item.value" :value="item.value" :label="item.label"></el-option>
                                    </el-select>
                                    <span v-else v-for="item in fillTypeList" :key="item.value">
                                        <span v-if="s.row.fillType === item.value">{{item.label}}</span>
                                    </span>
                                </template>
                            </el-table-column>

                            <z-td label="新增显示" status="is_update" field-name="addFlag" type="radio"></z-td>
                            <z-td label="编辑显示" status="is_update" field-name="editFlag" type="radio"></z-td>
                            <z-td label="列表显示" status="is_update" field-name="listFlag" type="radio"></z-td>
                            <z-td label="查询显示" status="is_update" field-name="queryFlag" type="radio"></z-td>
                            <z-td label="宽度" status="is_update" field-name="width" type="text"></z-td>

                            <el-table-column label="查询方式" prop="queryType" min-width="150">
                                <template slot-scope="s">
                                    <el-select v-if="s.row.is_update" v-model="s.row.queryType" placeholder="请选择">
                                        <el-option v-for="item in queryTypeList" :key="item.value" :value="item.value" :label="item.label"></el-option>
                                    </el-select>
                                    <span v-else v-for="item in queryTypeList" :key="item.value">
                                        <span v-if="s.row.queryType === item.value">{{item.label}}</span>
                                    </span>
                                </template>
                            </el-table-column>
                            <!-- <z-td label="TS类型" status="is_update" field-name="tsType" width="180"></z-td> -->
                            <!-- <z-td label="组件" status="is_update" field-name="component" type="text" width="180"></z-td> -->
                            <el-table-column label="组件" prop="component" min-width="220">
                                <template slot-scope="s">
                                    <el-select v-if="s.row.is_update" v-model="s.row.component" placeholder="请选择" clearable>
                                        <el-option v-for="item in componentTypeList" :key="item.value" :value="item.value" :label="item.label"></el-option>
                                    </el-select>
                                    <span v-else v-for="item in componentTypeList" :key="item.value">
                                        <span v-if="s.row.component === item.value">{{item.label}}</span>
                                    </span>
                                </template>
                            </el-table-column>
                            <!-- <z-td label="Vxe组件" status="is_update" field-name="javaField" type="text"></z-td> -->
                            <z-td label="字典类型" status="is_update" field-name="dictType" type="text"></z-td>
                            <z-td label="枚举" status="is_update" field-name="enumStr" type="text"></z-td>
                            <z-td label="编辑提示信息" status="is_update" field-name="editHelpMessage" type="text" width="180"></z-td>
                            <z-td label="列表提示信息" status="is_update" field-name="listHelpMessage" type="text" width="180"></z-td>
                            <!-- <z-td label="排序" status="is_update" field-name="sort" type="text"></z-td> -->
                            <el-table-column label="排序" prop="sort"></el-table-column>
                            <el-table-column label="创建时间" prop="createTime" min-width="180"></el-table-column>
                            <!-- <z-td label="组件字典类型" status="is_update" field-name="javaField" type="text" width="180"></z-td> -->

                            <el-table-column label="操作" width="230" fixed="right">
                                <template slot-scope="s">
                                    <el-button v-if="!s.row.is_update" size="mini" type="primary" icon="el-icon-edit" @click="showUpdateField(s.row)"></el-button>
                                    <el-button size="mini" icon="el-icon-back" v-if="s.row.is_update" @click="s.row.is_update = false"></el-button>
                                    <el-button size="mini" type="success" icon="el-icon-finished" v-if="s.row.is_update" @click="updateField(s.row)"></el-button>
                                    <el-button size="mini" type="danger" icon="el-icon-delete" v-if="!s.row.is_update" @click="delField(s.row)"></el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- ------------- 分页 ------------- -->
                        <div class="page-box" style="text-align: right">
                            <el-pagination
                                background
                                layout="total, prev, pager, next, sizes, jumper"
                                :current-page="fieldSearcher.pageNo"
                                :page-size="fieldSearcher.pageSize"
                                :total="genFieldCount"
                                :page-sizes="[1, 10, 20, 30, 40, 50, 100]"
                                @current-change="changeGenFieldPage"
                                @size-change="changeGenFieldPageSize"
                                @change="getTableFields()"
                            >
                            </el-pagination>
                        </div>
                    </div>

                    <div style="padding: 15px 0 15px; position: fixed; bottom: 0px; left: 0; width: 100%; display: flex; background-color: white; border: 1px solid #e9e1e1">
                        <div style="margin: 0 auto; text-align: center">
                            <el-button type="primary" size="mini" @click="showType = 1">上一步</el-button>
                            <el-button type="primary" size="mini" @click="showCodeView">下一步</el-button>
                        </div>
                    </div>
                </div>

                <!-- 代码预览 -->
                <div class="second" v-if="showType === 3">
                    <div class="c-panel" style="padding: 0 10px 50px 10px">
                        <el-radio-group v-model="endPoint" @change="changeEndPoint" v-for="item in templateTree">
                            <el-radio-button :key="item.name" :label="item.name">{{item.name}}</el-radio-button>
                        </el-radio-group>

                        <el-tabs v-model="codeTab" @tab-click="toggleCodeViewPanel">
                            <template v-for="item in templateList">
                                <el-tab-pane :name="item.name">
                                    <div slot="label">
                                        <span>{{item.name}}</span>
                                        <el-select v-model="templates[item.name]" placeholder="请选择" size="mini" @change="changeCodeViewTemplate($event, item)">
                                            <el-option v-for="iitem in item.children" :key="iitem.fileName" :label="iitem.fileName" :value="iitem.fileName"></el-option>
                                        </el-select>
                                    </div>
                                </el-tab-pane>
                            </template>
                            <div style="margin: 0 auto; text-align: center; padding: 0 30px 30px 30px">
                                <pre ref="backEndCode" id="backEndCode" style="min-height: 1300px; width: 100%"><textarea class="ace_text-input"></textarea></pre>
                            </div>
                        </el-tabs>
                    </div>

                    <div style="z-index: 99999; padding: 15px 0 5px 0; position: fixed; bottom: 0px; left: 0; width: 100%; display: flex; background-color: white; border: 1px solid #e9e1e1">
                        <div style="margin: 0 auto; text-align: center">
                            <el-button type="primary" size="mini" @click="gotoShowTypeTwo()">上一步</el-button>
                            <el-button type="primary" size="mini" @click="showCodeDownload()">下一步</el-button>
                        </div>
                    </div>
                </div>

                <!-- 立即生成 -->
                <div class="second" v-if="showType === 4">
                    <div class="c-panel" style="padding: 0 30px 50px 30px">
                        <div v-for="item in templateTree">
                            <el-divider content-position="left">{{item.name}}</el-divider>
                            <el-row>
                                <el-col :span="24">
                                    <div class="span-150">批量设置</div>
                                    <el-radio-group v-model="downloadSetting[item.name + '_all']" @change="checkoutSetAll($event, item.name, item.children)">
                                        <el-radio-button label="1">生成</el-radio-button>
                                        <el-radio-button label="0">忽略</el-radio-button>
                                    </el-radio-group>
                                </el-col>
                            </el-row>
                            <el-row>
                                <template v-for="iitem in item.children">
                                    <el-col :span="12" v-if="downloadSetting[iitem.name]">
                                        <div class="span-150">{{iitem.name}}</div>
                                        <el-radio-group v-model="downloadSetting[iitem.name]">
                                            <el-radio-button label="1">生成</el-radio-button>
                                            <el-radio-button label="0">忽略</el-radio-button>
                                        </el-radio-group>
                                        <el-select v-model="templates[iitem.name]" placeholder="请选择模板">
                                            <el-option v-for="iiitem in iitem.children" :key="iiitem.fileName" :label="iiitem.fileName" :value="iiitem.fileName"> </el-option>
                                        </el-select>
                                    </el-col>
                                </template>
                            </el-row>
                        </div>
                    </div>
                    <div style="margin: 0 auto; text-align: center">
                        <el-button type="success" size="mini" @click="saveDownSetting()">保存配置</el-button>
                    </div>

                    <div style="padding: 15px 0 5px 0; position: fixed; bottom: 0px; left: 0; width: 100%; display: flex; background-color: white; border: 1px solid #e9e1e1">
                        <div style="margin: 0 auto; text-align: center">
                            <el-button type="primary" size="mini" @click="showCodeView()">上一步</el-button>
                            <el-button type="primary" size="mini" @click="download(templateTree[0].name)">下载{{templateTree[0].name}}</el-button>
                            <el-button type="primary" size="mini" @click="download(templateTree[1].name)">下载{{templateTree[1].name}}</el-button>
                            <el-button type="primary" size="mini" @click="download()">下载全部</el-button>
                        </div>
                    </div>
                </div>
            </div>

            <el-dialog title="所有图标" :visible.sync="iconDialogVisible" @before-close="closeIconSelectPage" width="80%">
                <div v-for="item in icons" style="display: inline; height: 35px; width: 35px">
                    <i :key="item" :class="item" style="height: 35px; width: 35px; font-size: 35px; padding: 0 3px 3px 3px; cursor: pointer" @click="changeIcon(item)"></i>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="iconDialogVisible = false">取 消</el-button>
                </span>
            </el-dialog>

            <el-dialog title="添加自定义信息" :visible.sync="dataKvDialogVisible" @before-close="closeDataKvPage" width="80%">
                <el-form :inline="true">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="名称">
                              <el-input v-model="formDataKv.key" placeholder="输入英文"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="label">
                              <el-input v-model="formDataKv.label" placeholder="输入控件别名"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="类型">
                                <el-select v-model="formDataKv.type" placeholder="控件类型">
                                    <el-option label="输入框" value="text"></el-option>
                                  <!--   <el-option label="输入框（数字）" value="text"></el-option>
                                    <el-option label="多行文本框" value="text"></el-option>
                                    <el-option label="单选框" value="text"></el-option>
                                    <el-option label="多选框" value="text"></el-option>
                                    <el-option label="下拉框" value="text"></el-option>
                                    <el-option label="开关" value="text"></el-option> -->
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="值">
                              <el-input v-model="formDataKv.value" placeholder="输入默认值"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addDataKv">确 定</el-button>
                    <el-button @click="closeDataKvPage">取 消</el-button>
                </span>
            </el-dialog>

            <el-dialog title="添加表结构" v-if="addTableShowFlag" :visible.sync="addTableShowFlag" @before-close="closeAddTablePage" width="80%">
                <el-form ref="add-table-search-form" @submit.native.prevent size="mini" label-width="150px" label-position="right" :inline="true">
                    <el-form-item label="数据源：">
                        <el-select v-model="selectedDatabaseId" placeholder="请选择" clearable @change="changeDatabase">
                            <el-option v-for="item in databases" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                        </el-select>
                        <el-button type="warning" icon="el-icon-add" size="mini" @click="showAddDatabasePage()">新增数据源</el-button>
                        <el-button type="primary" icon="el-icon-edit" @click="showUpdateDatabasePage()" circle></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle @click="delDatabase()"></el-button>
                    </el-form-item>
                    <el-form-item label="表名称：">
                        <el-input v-model.trim="tableSearch.tableName" placeholder="请输入搜索" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="表描述：">
                        <el-input v-model.trim="tableSearch.tableComment" placeholder="请输入搜索" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="创建时间：">
                        <el-date-picker
                            v-model="tableSearch.createTime"
                            type="datetimerange"
                            :picker-options="pickerOptions"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            clearable
                            :editable="false"
                            size="mini"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            @change="tableChangeCreateTime"
                            align="right"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="tableSearch.pageNo = 1; showAddTablePage()">查询</el-button>
                        <el-button type="info" icon="el-icon-refresh" size="mini" @click="showAddTablePage(true)">重置</el-button>
                    </el-form-item>
                </el-form>
                <div>
                    <el-table
                        ref="tables"
                        :data="tables"
                        size="mini"
                        border
                        highlight-current-row
                        @current-change="handleCurrentChange"
                        stripe
                        @selection-change="tableSelectionChange"
                        @sort-change="sort"
                        @row-click="handlerTableClick"
                        @row-dblclick="handlerTableDblclick"
                    >
                        <el-table-column type="selection" min-width="45"></el-table-column>
                        <el-table-column label="序号" width="45">
                            <template slot-scope="scope">{{indexMethod(scope.$index, tableSearch)}}</template>
                        </el-table-column>
                        <el-table-column label="表名称" prop="tableName"></el-table-column>
                        <el-table-column label="表描述" prop="tableComment"></el-table-column>
                        <el-table-column label="创建时间" prop="createTime"></el-table-column>
                    </el-table>
                    <div class="page-box" style="text-align: right">
                        <el-pagination
                            background
                            layout="total, prev, pager, next, sizes, jumper"
                            :current-page="tableSearch.pageNo"
                            :page-size="tableSearch.pageSize"
                            :total="tableCount"
                            :page-sizes="[1, 10, 20, 30, 40, 50, 100]"
                            @current-change="changeTablePage"
                            @size-change="changeTablePageSize"
                            @change="showAddTablePage()"
                        >
                        </el-pagination>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addTableShowFlag = false">取 消</el-button>
                    <el-button type="primary" @click="showSelectGenDataPage">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 请选择数据集 -->
            <el-dialog title="请选择数据集" :visible.sync="useDataVisible">
                <el-row>
                    <el-col :span="24">
                        <el-button type="warning" @click="showAddGenData()" size="mini">新增数据集</el-button>
                        <el-button v-if="genDataId!==0" type="success" @click="copyGenData()" size="mini">复制</el-button>
                        <el-button v-if="genDataId!==0" type="primary" @click="showUpdateGenData()" size="mini">修改</el-button>
                        <el-button v-if="genDataId!==0" type="danger" @click="delGenData()" size="mini">删除</el-button>
                    </el-col>
                    <el-col :span="24" style="margin-top: 30px">
                        <el-radio-group v-model="genDataId">
                            <el-radio :label="1" border>默认数据集</el-radio>
                            <el-radio v-if="genDataList.length>0" v-for="item in genDataList" :key="item.id" :label="item.id" border>{{item.name}}</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-row>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="addGenTables">确 定</el-button>
                    <el-button @click="useDataVisible = false">取 消</el-button>
                    <!-- <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button> -->
                </div>
                <el-dialog width="80%" title="新增数据集" :visible.sync="addGenDataVisible" append-to-body>
                    <el-form ref="form" :model="genData" label-width="auto" label-position="right" size="mini">
                        <el-divider content-position="left">基础信息</el-divider>
                        <el-row>
                            <z-input :span="12" label="数据集名称" v-model="genData.name" tips="数据集名称" required></z-input>
                            <z-input :span="12" label="作者" v-model="genData.authorName" tips="作者" required></z-input>
                            <el-col :span="24">
                                <el-form-item label="备注" :rules="[{ required: true, message: '请输入备注' }, ]">
                                    <el-input type="textarea" :rows="4" v-model="genData.remark" clearable></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-divider content-position="left"><b>生成信息</b></el-divider>
                        <el-row>
                            <z-input :span="12" label="服务名" v-model="genData.serviceName" tips="微服务名称" required></z-input>
                            <z-input :span="12" label="父包名" v-model="genData.packageName" tips="父包名" required></z-input>
                            <z-input :span="12" label="模块名" v-model="genData.moduleName" tips="模块名" required></z-input>
                            <z-input :span="12" label="子包名" v-model="genData.subPackageName" tips="模块名" required></z-input>
                            <z-input :span="12" label="实体父类" v-model="genData.entitySuperClassName" tips="实体父类" required></z-input>
                            <z-input :span="12" label="mapper父类" v-model="genData.mapperSuperClassName" tips="mapper父类" required></z-input>
                            <z-input :span="12" label="service父类" v-model="genData.serviceSuperClassName" tips="service父类" required></z-input>
                            <z-input :span="12" label="serviceImpl父类" v-model="genData.serviceImplSuperClassName" tips="serviceImpl父类" required></z-input>
                            <z-radio :span="12" label="@DS" v-model="genData.dsFlag" tips="ServiceImpl类是否标记@DS注解，加上该注解后，sql操作会自动切换数据源" required :children="{'1': '是', '0':'否'}"> </z-radio>
                            <!-- <z-input :span="12" label="数据源名" v-model="genData.dsName" tips="数据源名" required ></z-input> -->
                            <z-radio :span="12" label="@TenantLine" v-model="genData.tenderFlag" tips="Mapper类是否标记@TenantLine注解，加上该注解sql操作不会自动拼接租户ID" required :children="{'1': '是', '0':'否'}"> </z-radio>
                            <z-radio :span="12" label="Lombok" v-model="genData.lombokFlag" tips="实体类是否使用@Data注解" required :children="{'1': '是', '0':'否'}"> </z-radio>
                            <z-radio :span="12" label="链式模型" v-model="genData.chainFlag" tips="实体类是否使用@Accessors(chain = true)注解" required :children="{'1': '是', '0':'否'}"> </z-radio>
                            <z-radio :span="12" label="生成字段常量" v-model="genData.constFlag" tips="生成字段常量" required :children="{'1': '是', '0':'否'}"> </z-radio>
                            <z-radio :span="12" label="生成方式" v-model="genData.genFlag" tips="生成字段常量" required>
                                <el-radio label="0">打包下载</el-radio>
                            </z-radio>
                            <z-input :span="24" label="后端生成路径" v-model="genData.suffixPath" tips="后端生成路径" required></z-input>
                            <z-input :span="24" label="前端生成路径" v-model="genData.prefixPath" tips="前端生成路径" required></z-input>
                        </el-row>

                        <el-divider content-position="left"><b>后端自定义信息</b><el-button type="primary" size="mini" style="margin-left: 30px;" @click="showAddDataKvPage('back')">新增</el-button></el-divider>
                        <el-row>
                            <template v-for="kv in backKvList">
                                <el-col :span="12">
                                    <el-form-item>
                                        <template slot="label">
                                            <el-button type="danger" size="mini" @click="delDataKv(kv)">删除</el-button>
                                            <span>{{kv.value.name}}</span>
                                        </template>
                                        <el-input v-model="kv.value.value" clearable></el-input>
                                    </el-form-item>
                                </el-col>
                            </template>
                        </el-row>

                        <el-divider content-position="left"><b>前端信息</b></el-divider>
                        <el-row>
                            <z-input :span="12" label="前端应用名" v-model="genData.appPackageName" tips="前端应用名" required></z-input>
                            <z-input :span="12" label="前端模块名" v-model="genData.appModuleName" tips="前端模块名" required></z-input>
                            <z-radio :span="12" label="弹窗方式" v-model="genData.appPopupType" tips="点击新增或编辑时，弹窗的打开方式" required>
                                <el-radio label="1">对话框</el-radio>
                                <el-radio label="2">抽屉</el-radio>
                                <el-radio label="3">跳转</el-radio>
                            </z-radio>
                            <z-radio :span="12" label="生成模板" v-model="genData.appTemplateType" tips="生成模板" required>
                                <el-radio label="1">单表</el-radio>
                                <el-radio label="2">树结构</el-radio>
                                <el-radio label="3">主从结构</el-radio>
                            </z-radio>
                            <z-radio :span="12" label="显示新增按钮" v-model="genData.appAddBtnFlag" tips="显示新增按钮" required :children="{'1': '是', '0':'否'}"> </z-radio>
                            <z-radio :span="12" label="显示编辑按钮" v-model="genData.appUpdateBtnFlag" tips="显示编辑按钮" required :children="{'1': '是', '0':'否'}"> </z-radio>
                            <z-radio :span="12" label="显示删除按钮" v-model="genData.appDelBtnFlag" tips="显示删除按钮" required :children="{'1': '是', '0':'否'}"> </z-radio>
                            <z-radio :span="12" label="显示复制按钮" v-model="genData.appCopyBtnFlag" tips="显示复制按钮" required :children="{'1': '是', '0':'否'}"> </z-radio>
                            <z-radio :span="12" label="显示详情按钮" v-model="genData.appShowBtnFlag" tips="显示详情按钮" required :children="{'1': '是', '0':'否'}"> </z-radio>

                            <z-input :span="12" label="新增按钮权限" v-model="genData.appAddBtnCode" tips="新增按钮权限" required btn btn-name="生成" @btn-func="genBtnCode($event, 'add')"></z-input>
                            <z-input :span="12" label="编辑按钮权限" v-model="genData.appUpdateBtnCode" tips="编辑按钮权限" required btn btn-name="生成" @btn-func="genBtnCode($event, 'update')"></z-input>
                            <z-input :span="12" label="删除按钮权限" v-model="genData.appDelBtnCode" tips="删除按钮权限" required btn btn-name="生成" @btn-func="genBtnCode($event, 'del')"></z-input>
                            <z-input :span="12" label="复制按钮权限" v-model="genData.appCopyBtnCode" tips="复制按钮权限" required btn btn-name="生成" @btn-func="genBtnCode($event, 'copy')"></z-input>
                            <z-input :span="12" label="详情按钮权限" v-model="genData.appShowBtnCode" tips="详情按钮权限" required btn btn-name="生成" @btn-func="genBtnCode($event, 'detail')"></z-input>
                        </el-row>

                        <el-divider content-position="left"><b>前端自定义信息</b><el-button type="primary" size="mini" style="margin-left: 30px;" @click="showAddDataKvPage('front')">新增</el-button></el-divider>
                        <el-row style="flex-wrap: wrap; flex-direction: row">
                            <template v-for="kv in frontKvList">
                                <el-col :span="12">
                                    <el-form-item >
                                        <template slot="label">
                                            <el-button type="danger" size="mini" @click="delDataKv(kv)">删除</el-button>
                                            <span>{{kv.value.name}}</span>
                                        </template>
                                        <el-input v-model="kv.value.value" clearable></el-input>
                                    </el-form-item>
                                </el-col>
                            </template>
                        </el-row>

                        <el-divider content-position="left">SQL信息</el-divider>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="菜单所属应用" :rules="[{ required: true, message: '请输入菜单所属应用' }, ]">
                                    <el-select v-model="genData.parentSystem" placeholder="请选择">
                                        <el-option v-for="item in allSystem" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="上级菜单" :rules="[{ required: true, message: '请输入上级菜单' }, ]">
                                    <el-select v-model="genData.parentMenuId" placeholder="请选择">
                                        <el-option v-for="item in parentMenus" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="菜单图标" :rules="[{ required: true, message: '请输入菜单图标' }, ]">
                                    <el-input v-model="genData.menuIcon" disabled>
                                        <template slot="prepend"><i :class="genData.menuIcon" style="font-size: 20px"></i></template>
                                        <el-button slot="append" icon="el-icon-s-grid" @click="showIconSelectPage('6')"></el-button>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-divider content-position="left" v-if="genData.appTemplateType === '2'">其他信息</el-divider>
                        <el-row v-if="genData.appTemplateType === '2'">
                            <el-col :span="12">
                                <el-form-item label="树字段名称">
                                    <el-input v-model="genData.parentIdName" clearable></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="addGenData">确 定</el-button>
                        <el-button @click="addGenDataVisible = false">取 消</el-button>
                    </div>
                </el-dialog>
            </el-dialog>

            <!-- 在线写模板 -->
             <el-dialog title="在线写模板" v-if="testTemplateShowFlag" :visible.sync="testTemplateShowFlag" @before-close="closeTestTemplatePage" width="100%" style="margin-top: -4vh;">
                <el-button type="primary" :disabled="compiling" @click="compileCode">编译</el-button>
                <el-button type="warning" @click="showParamDrawerPage">查看模板参数</el-button>
                <span style="padding-left: 7px;">{{saveTestTemplateContentTip}}</span>
                <div style="display: inline;">
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <pre ref="testCode" id="testCode" style="height: 800px; width: 100%;">
                                <textarea class="ace_text-input"></textarea>
                            </pre>
                        </el-col>
                        <el-col :span="12">
                            <pre ref="testCodeResult" id="testCodeResult" style="height: 800px; width: 100%;">
                                <textarea class="ace_text-input"></textarea>
                            </pre>
                        </el-col>
                    </el-row>
                </div>
            </el-dialog>

            <div class="testTemplate" v-if="paramDrawerFlag">
                <el-drawer title="模板参数列表" :visible.sync="paramDrawerFlag"  direction="rtl" :before-close="closeParamDrawerPage" >
                <el-descriptions class="margin-top":column="1" size="mini" border >
                    <template #title>
                        <span style="padding-left: 10px;">表信息、对象、前端信息（对象）</span>
                    </template>
                    <template v-for="(item, index) in templateAllParams.t">
                        <el-descriptions-item v-if="index.indexOf('_comment')===-1&&templateAllParams.t[index+'_comment']">
                            <template slot="label">t.{{index}}</template>
                            {{templateAllParams.t[index+'_comment']}}
                        </el-descriptions-item>
                    </template>
                </el-descriptions>
                <div style="margin: 15px 0 2px 0;"></div>
                <el-descriptions class="margin-top" :column="1" size="mini" border>
                    <template #title>
                        <div style="height: 30px;width:300px;padding-left: 10px;">
                            <span v-if="isPkParam">主键信息（对象）</span>
                            <span v-else>字段信息（对象数组）</span>
                        </div>
                        <el-switch v-if="templateAllParams.pk" v-model="isPkParam" active-text="主键" inactive-text="字段" style="padding-left: 10px;"></el-switch>
                    </template>
                    <template v-for="(item, index) in templateAllParams.cs">
                        <el-descriptions-item v-if="index.indexOf('_comment')===-1&&templateAllParams.cs[index+'_comment']">
                            <template slot="label">
                                <span v-if="isPkParam">pk.{{index}}</span>
                                <span v-else>cs[0].{{index}}</span>
                            </template>
                            {{templateAllParams.cs[index+'_comment']}}
                        </el-descriptions-item>
                    </template>
                </el-descriptions>
                <div style="margin: 15px 0 2px 0;"></div>
                <el-descriptions class="margin-top" :column="1" size="mini" border>
                    <template #title>
                        <span style="padding-left: 10px;">自定义字段信息（对象）</span>
                    </template>
                    <template v-for="(item, index) in templateAllParams.kv">
                        <el-descriptions-item>
                            <template slot="label">kv.{{index}}</template>
                            {{templateAllParams.kv[index]}}
                        </el-descriptions-item>
                    </template>
                </el-descriptions>
            </el-drawer>
            </div>

            <!-- 数据源 -->
             <el-dialog :title="database.id?'修改数据源':'新增数据源'" v-if="addDatabaseShowFlag" :visible.sync="addDatabaseShowFlag" @before-close="closeAddDatabasePage" width="80%">
                <el-form ref="add-database-form" label-width="150px" label-position="right" size="mini">
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="名称" :rules="[{ required: true, message: '请输入名称' }, ]">
                                <el-input v-model="database.name" clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="类型" :rules="[{ required: true, message: '请输入类型' }, ]">
                                <el-select v-model="database.type" placeholder="请选择">
                                    <el-option v-for="item in jdbcTypeList" :key="item.value" :value="item.value" :label="item.label"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="用户名" :rules="[{ required: true, message: '请输入用户名' }, ]">
                                <el-input v-model="database.username" clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="密码" :rules="[{ required: true, message: '请输入密码' }, ]">
                                <el-input v-model="database.password" clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <!-- <el-col :span="12">
                            <el-form-item label="配置方式" :rules="[{ required: true, message: '请输入配置方式' }, ]">
                                <el-radio v-model="database.conType" label="1" border size="mini">主机</el-radio>
                                <el-radio v-model="database.conType" label="2" border size="mini">JDBC</el-radio>
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="12" v-if="database.conType === '1'">
                            <el-form-item label="主机" :rules="[{ required: true, message: '请输入主机' }, ]">
                                <el-input v-model="database.host" clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-if="database.conType === '1'">
                        <el-col :span="12">
                            <el-form-item label="端口" :rules="[{ required: true, message: '请输入端口' }, ]">
                                <el-input v-model="database.port" clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="数据库">
                                <el-input v-model="database.dataSchema" clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-if="database.conType === '2'">
                        <el-col :span="24">
                            <el-form-item label="jdbcUrl" :rules="[{ required: true, message: '请输入jdbcUrl' }, ]">
                                <el-input type="textarea" :rows="4" v-model="database.jdbcUrl" clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addDatabaseShowFlag = false">取 消</el-button>
                    <el-button type="primary" @click="addDatabase">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 参数列表 -->
            <el-dialog title="参数列表" :visible.sync="templateAllParamsDialogVisible" width="95%" :before-close="closeTemplateAllParamsPage">
                <el-descriptions class="margin-top" title="表信息、对象、前端信息（对象）" :column="3" size="mini" border>
                    <template v-for="(item, index) in templateAllParams.t">
                        <el-descriptions-item v-if="index.indexOf('_comment')===-1&&templateAllParams.t[index+'_comment']">
                            <template slot="label">t.{{index}}</template>
                            {{templateAllParams.t[index+'_comment']}}
                        </el-descriptions-item>
                    </template>
                </el-descriptions>
                <div style="margin: 15px 0 2px 0;"></div>
                <el-descriptions class="margin-top" title="字段信息（对象数组）" :column="3" size="mini" border>
                    <template slot="title">
                        <div style="height: 30px;width:300px;">
                            <span v-if="isPkParam">主键信息（对象）</span>
                            <span v-else>字段信息（对象数组）</span>
                        </div>
                        <el-switch v-if="templateAllParams.pk" v-model="isPkParam" active-text="主键" inactive-text="字段"></el-switch>
                    </template>
                    <template v-for="(item, index) in templateAllParams.cs">
                        <el-descriptions-item v-if="index.indexOf('_comment')===-1&&templateAllParams.cs[index+'_comment']">
                            <template slot="label">
                                <span v-if="isPkParam">pk.{{index}}</span>
                                <span v-else>cs[0].{{index}}</span>
                            </template>
                            {{templateAllParams.cs[index+'_comment']}}
                        </el-descriptions-item>
                    </template>
                </el-descriptions>
                <div style="margin: 15px 0 2px 0;"></div>
                <el-descriptions class="margin-top" title="自定义字段信息（对象）" :column="3" size="mini" border>
                    <template v-for="(item, index) in templateAllParams.kv">
                        <el-descriptions-item>
                            <template slot="label">kv.{{index}}</template>
                            {{templateAllParams.kv[index]}}
                        </el-descriptions-item>
                    </template>
                </el-descriptions>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="closeTemplateAllParamsPage()">关闭</el-button>
                </span>
            </el-dialog>
        </div>

        <script>
            const api_url = "http://localhost:8099"
            const iconList = [
                "el-icon-platform-eleme",
                "el-icon-eleme",
                "el-icon-delete-solid",
                "el-icon-delete",
                "el-icon-s-tools",
                "el-icon-setting",
                "el-icon-user-solid",
                "el-icon-user",
                "el-icon-phone",
                "el-icon-phone-outline",
                "el-icon-more",
                "el-icon-more-outline",
                "el-icon-star-on",
                "el-icon-star-off",
                "el-icon-s-goods",
                "el-icon-goods",
                "el-icon-warning",
                "el-icon-warning-outline",
                "el-icon-question",
                "el-icon-info",
                "el-icon-remove",
                "el-icon-circle-plus",
                "el-icon-success",
                "el-icon-error",
                "el-icon-zoom-in",
                "el-icon-zoom-out",
                "el-icon-remove-outline",
                "el-icon-circle-plus-outline",
                "el-icon-circle-check",
                "el-icon-circle-close",
                "el-icon-s-help",
                "el-icon-help",
                "el-icon-minus",
                "el-icon-plus",
                "el-icon-check",
                "el-icon-close",
                "el-icon-picture",
                "el-icon-picture-outline",
                "el-icon-picture-outline-round",
                "el-icon-upload",
                "el-icon-upload2",
                "el-icon-download",
                "el-icon-camera-solid",
                "el-icon-camera",
                "el-icon-video-camera-solid",
                "el-icon-video-camera",
                "el-icon-message-solid",
                "el-icon-bell",
                "el-icon-s-cooperation",
                "el-icon-s-order",
                "el-icon-s-platform",
                "el-icon-s-fold",
                "el-icon-s-unfold",
                "el-icon-s-operation",
                "el-icon-s-promotion",
                "el-icon-s-home",
                "el-icon-s-release",
                "el-icon-s-ticket",
                "el-icon-s-management",
                "el-icon-s-open",
                "el-icon-s-shop",
                "el-icon-s-marketing",
                "el-icon-s-flag",
                "el-icon-s-comment",
                "el-icon-s-finance",
                "el-icon-s-claim",
                "el-icon-s-custom",
                "el-icon-s-opportunity",
                "el-icon-s-data",
                "el-icon-s-check",
                "el-icon-s-grid",
                "el-icon-menu",
                "el-icon-share",
                "el-icon-d-caret",
                "el-icon-caret-left",
                "el-icon-caret-right",
                "el-icon-caret-bottom",
                "el-icon-caret-top",
                "el-icon-bottom-left",
                "el-icon-bottom-right",
                "el-icon-back",
                "el-icon-right",
                "el-icon-bottom",
                "el-icon-top",
                "el-icon-top-left",
                "el-icon-top-right",
                "el-icon-arrow-left",
                "el-icon-arrow-right",
                "el-icon-arrow-down",
                "el-icon-arrow-up",
                "el-icon-d-arrow-left",
                "el-icon-d-arrow-right",
                "el-icon-video-pause",
                "el-icon-video-play",
                "el-icon-refresh",
                "el-icon-refresh-right",
                "el-icon-refresh-left",
                "el-icon-finished",
                "el-icon-sort",
                "el-icon-sort-up",
                "el-icon-sort-down",
                "el-icon-rank",
                "el-icon-loading",
                "el-icon-view",
                "el-icon-c-scale-to-original",
                "el-icon-date",
                "el-icon-edit",
                "el-icon-edit-outline",
                "el-icon-folder",
                "el-icon-folder-opened",
                "el-icon-folder-add",
                "el-icon-folder-remove",
                "el-icon-folder-delete",
                "el-icon-folder-checked",
                "el-icon-tickets",
                "el-icon-document-remove",
                "el-icon-document-delete",
                "el-icon-document-copy",
                "el-icon-document-checked",
                "el-icon-document",
                "el-icon-document-add",
                "el-icon-printer",
                "el-icon-paperclip",
                "el-icon-takeaway-box",
                "el-icon-search",
                "el-icon-monitor",
                "el-icon-attract",
                "el-icon-mobile",
                "el-icon-scissors",
                "el-icon-umbrella",
                "el-icon-headset",
                "el-icon-brush",
                "el-icon-mouse",
                "el-icon-coordinate",
                "el-icon-magic-stick",
                "el-icon-reading",
                "el-icon-data-line",
                "el-icon-data-board",
                "el-icon-pie-chart",
                "el-icon-data-analysis",
                "el-icon-collection-tag",
                "el-icon-film",
                "el-icon-suitcase",
                "el-icon-suitcase-1",
                "el-icon-receiving",
                "el-icon-collection",
                "el-icon-files",
                "el-icon-notebook-1",
                "el-icon-notebook-2",
                "el-icon-toilet-paper",
                "el-icon-office-building",
                "el-icon-school",
                "el-icon-table-lamp",
                "el-icon-house",
                "el-icon-no-smoking",
                "el-icon-smoking",
                "el-icon-shopping-cart-full",
                "el-icon-shopping-cart-1",
                "el-icon-shopping-cart-2",
                "el-icon-shopping-bag-1",
                "el-icon-shopping-bag-2",
                "el-icon-sold-out",
                "el-icon-sell",
                "el-icon-present",
                "el-icon-box",
                "el-icon-bank-card",
                "el-icon-money",
                "el-icon-coin",
                "el-icon-wallet",
                "el-icon-discount",
                "el-icon-price-tag",
                "el-icon-news",
                "el-icon-guide",
                "el-icon-male",
                "el-icon-female",
                "el-icon-thumb",
                "el-icon-cpu",
                "el-icon-link",
                "el-icon-connection",
                "el-icon-open",
                "el-icon-turn-off",
                "el-icon-set-up",
                "el-icon-chat-round",
                "el-icon-chat-line-round",
                "el-icon-chat-square",
                "el-icon-chat-dot-round",
                "el-icon-chat-dot-square",
                "el-icon-chat-line-square",
                "el-icon-message",
                "el-icon-postcard",
                "el-icon-position",
                "el-icon-turn-off-microphone",
                "el-icon-microphone",
                "el-icon-close-notification",
                "el-icon-bangzhu",
                "el-icon-time",
                "el-icon-odometer",
                "el-icon-crop",
                "el-icon-aim",
                "el-icon-switch-button",
                "el-icon-full-screen",
                "el-icon-copy-document",
                "el-icon-mic",
                "el-icon-stopwatch",
                "el-icon-medal-1",
                "el-icon-medal",
                "el-icon-trophy",
                "el-icon-trophy-1",
                "el-icon-first-aid-kit",
                "el-icon-discover",
                "el-icon-place",
                "el-icon-location",
                "el-icon-location-outline",
                "el-icon-location-information",
                "el-icon-add-location",
                "el-icon-delete-location",
                "el-icon-map-location",
                "el-icon-alarm-clock",
                "el-icon-timer",
                "el-icon-watch-1",
                "el-icon-watch",
                "el-icon-lock",
                "el-icon-unlock",
                "el-icon-key",
                "el-icon-service",
                "el-icon-mobile-phone",
                "el-icon-bicycle",
                "el-icon-truck",
                "el-icon-ship",
                "el-icon-basketball",
                "el-icon-football",
                "el-icon-soccer",
                "el-icon-baseball",
                "el-icon-wind-power",
                "el-icon-light-rain",
                "el-icon-lightning",
                "el-icon-heavy-rain",
                "el-icon-sunrise",
                "el-icon-sunrise-1",
                "el-icon-sunset",
                "el-icon-sunny",
                "el-icon-cloudy",
                "el-icon-partly-cloudy",
                "el-icon-cloudy-and-sunny",
                "el-icon-moon",
                "el-icon-moon-night",
                "el-icon-dish",
                "el-icon-dish-1",
                "el-icon-food",
                "el-icon-chicken",
                "el-icon-fork-spoon",
                "el-icon-knife-fork",
                "el-icon-burger",
                "el-icon-tableware",
                "el-icon-sugar",
                "el-icon-dessert",
                "el-icon-ice-cream",
                "el-icon-hot-water",
                "el-icon-water-cup",
                "el-icon-coffee-cup",
                "el-icon-cold-drink",
                "el-icon-goblet",
                "el-icon-goblet-full",
                "el-icon-goblet-square",
                "el-icon-goblet-square-full",
                "el-icon-refrigerator",
                "el-icon-grape",
                "el-icon-watermelon",
                "el-icon-cherry",
                "el-icon-apple",
                "el-icon-pear",
                "el-icon-orange",
                "el-icon-coffee",
                "el-icon-ice-tea",
                "el-icon-ice-drink",
                "el-icon-milk-tea",
                "el-icon-potato-strips",
                "el-icon-lollipop",
                "el-icon-ice-cream-square",
                "el-icon-ice-cream-round",
            ]
            var tmpCache = localStorage.getItem("templates") === null ? {}: JSON.parse(localStorage.getItem("templates"))
            var testTemplateCache = localStorage.getItem("testTemplateContent") === null ? '': localStorage.getItem("testTemplateContent")
            // console.log('tmpCache', tmpCache);
            var app = new Vue({
                el: ".vue-box",
                data: {
                    showType: 0,
                    aceDom: ace,
                    icons: iconList,
                    tables: [],
                    tableCount: 0,
                    tableSearch: {
                        pageNo: 1, // 当前页
                        pageSize: 10, // 页大小
                        sortType: 0, // 排序字段
                        sortOrder: true, // 排序方式
                    },
                    selectedTables: [],
                    // 表页
                    genTableCount: 0,
                    genTables: [],
                    genTableSearcher: {
                        pageNo: 1, // 当前页
                        pageSize: 10, // 页大小
                        sortType: 0, // 排序字段
                        sortOrder: true, // 排序方式
                    },
                    genTable: {
                        database: "edu",
                        tableName: "t_project",
                        entityName: "Project",
                        packageName: "Project",
                        authorName: "zengyufei",
                        radio: "1",
                    },
                    iconDialogVisible: false,

                    iconSelectType: '',
                    allSystem: [],
                    parentMenus: [],

                    genFieldCount: 0,
                    genField: [],
                    fieldSearcher: {
                        genTableId: 0,
                        pageNo: 1, // 当前页
                        pageSize: 10, // 页大小
                        sortType: 0, // 排序字段
                        sortOrder: true, // 排序方式
                    },

                    javaTypeList: [
                        {
                            value: "String",
                            label: "String",
                        },
                        {
                            value: "Long",
                            label: "Long",
                        },
                        {
                            value: "Boolean",
                            label: "Boolean",
                        },
                        {
                            value: "Date",
                            label: "Date",
                        },
                        {
                            value: "LocalDateTime",
                            label: "LocalDateTime",
                        },
                        {
                            value: "LocalDate",
                            label: "LocalDate",
                        },
                        {
                            value: "BigDecimal",
                            label: "BigDecimal",
                        },
                        {
                            value: "Double",
                            label: "Double",
                        },
                        {
                            value: "Integer",
                            label: "Integer",
                        },
                        {
                            value: "Float",
                            label: "Float",
                        },
                        {
                            value: "Short",
                            label: "Short",
                        },
                        {
                            value: "Char",
                            label: "Char",
                        },
                        {
                            value: "Byte",
                            label: "Byte",
                        },
                        {
                            value: "Enum",
                            label: "Enum",
                        },
                    ],

                    jdbcTypeList: [
                        {
                            value: "1",
                            label: "mysql",
                        },
                    ],
                    fillTypeList: [
                        {
                            value: "1",
                            label: "新增时填充",
                        },
                        {
                            value: "2",
                            label: "修改时填充",
                        },
                        {
                            value: "3",
                            label: "新增和修改时填充",
                        },
                    ],

                    queryTypeList: [
                        {
                            value: "1",
                            label: "相等",
                        },
                        {
                            value: "2",
                            label: "右模糊查询",
                        },
                        {
                            value: "3",
                            label: "全模糊查询",
                        },
                        {
                            value: "4",
                            label: "不相等",
                        },
                        {
                            value: "5",
                            label: "左模糊查询",
                        },
                    ],

                    componentTypeList: [
                        {
                            value: "1",
                            label: "Input",
                        },
                        {
                            value: "2",
                            label: "InputNumber",
                        },
                        {
                            value: "3",
                            label: "Radio",
                        },
                        {
                            value: "4",
                            label: "Checkbox",
                        },
                        {
                            value: "5",
                            label: "Select",
                        },
                        {
                            value: "6",
                            label: "Switch",
                        },
                        {
                            value: "7",
                            label: "DateTimePicker",
                        },
                        {
                            value: "8",
                            label: "TimePicker",
                        },
                        {
                            value: "9",
                            label: "DatePicker",
                        },
                        {
                            value: "10",
                            label: "Slider",
                        },
                    ],

                    // 数据表
                    addTableShowFlag: false,
                    // 数据源
                    addDatabaseShowFlag: false,
                    // 数据集
                    useDataVisible: false,
                    addGenDataVisible: false,

                    genDataList: [],
                    genDataId: 0,

                    genData: {},

                    endPoint: "",
                    language: "java",
                    codeTab: "",
                    codeList: [],

                    templateTree: [],
                    templates: tmpCache,
                    attr: {},
                    downloadSetting: {},

                    // 添加自定义kv
                    dataKvDialogVisible: false,
                    // kv表单
                    formDataKv:{},
                    // 显示所有模板参数
                    templateAllParamsDialogVisible: false,
                    templateAllParams: {},
                    isPkParam: false,

                    databases: [],
                    selectedDatabaseId: null,
                    firstLoadDatabasePage: true,

                    // 新增数据源对象
                    database: {
                        name: "",
                        type: "1",
                        username: "",
                        password: "",
                        conType: "1",
                        host: "",
                        port: "3306",
                        dataSchema: "",
                        jdbcUrl: "",
                    },
                    pickerOptions: {
                        shortcuts: [
                            {
                                text: "最近一周",
                                onClick(picker) {
                                    const end = new Date()
                                    const start = new Date()
                                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                                    picker.$emit("pick", [start, end])
                                },
                            },
                            {
                                text: "最近一个月",
                                onClick(picker) {
                                    const end = new Date()
                                    const start = new Date()
                                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                                    picker.$emit("pick", [start, end])
                                },
                            },
                            {
                                text: "最近三个月",
                                onClick(picker) {
                                    const end = new Date()
                                    const start = new Date()
                                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                                    picker.$emit("pick", [start, end])
                                },
                            },
                        ],
                    },


                    frontKvList: [],
                    backKvList: [],

                    backGenKvList: [],
                    frontGenKvList: [],

                    testTemplateShowFlag: false,
                    compiling: false,
                    paramDrawerFlag: false,

                    testTemplateContent: testTemplateCache,
                    saveTestTemplateContentTip: '',


                },
                created: function () {
                    if (this.showType === 0) {
                        this.getGenTable()
                    }
                    var $this = this
                    this.getAllSystem((res) => {
                        $this.allSystem = res.data
                    })
                    this.getParentMenus((res) => {
                        $this.parentMenus = res.data
                    })
                },
                computed: {
                    templateList() {
                        var findTemplateList = this.templateTree.filter((s) => s.name === this.endPoint)
                        if (findTemplateList.length > 0) {
                            return findTemplateList[0].children
                        }
                        return []
                    },
                    selectTemplateList() {
                        return this.templateTree.filter((s) => s.name === this.endPoint)[0].children
                    },
                },
                mounted: function () {},
                methods: {
                    // 注意 function(){this} 获取的this是function的，()=>{this}获取的this是全局的
                    genBtnCode(val, type) {
                        console.log(type, " == ", val)
                        var code = this.genTable.varName + "-" + type
                        if (type === 'add') {
                            this.genTable.appAddBtnCode = code
                        } else if (type === 'update') {
                            this.genTable.appUpdateBtnCode = code
                        } else if (type === 'del') {
                            this.genTable.appDelBtnCode = code
                        } else if (type === 'copy') {
                            this.genTable.appCopyBtnCode = code
                        } else if (type === 'detail') {
                            this.genTable.appShowBtnCode = code
                        }
                    },
                    showSelectGenDataPage() {
                        var selectedTableAttr = this.$refs.tables.selection
                        if (selectedTableAttr.length === 0) {
                            this.$message.error("请选择至少一条数据")
                            return
                        }

                        var $this = this
                        this.getGenDataList(() => {
                            $this.useDataVisible = true
                        })
                    },
                    showAddGenData() {
                        this.addGenDataVisible = true
                        this.genData = {}
                    },
                    copyGenData() {
                        var $this = this
                        this.ajax("/gen/genData/copyGenDataById", { genDataId: this.genDataId }, function (res) {
                            if (res.data) {
                                $this.genData = res.data
                                $this.getGenDataList()
                                // $this.addGenDataVisible = true
                                // if (!$this.genData.parentSystem && $this.allSystem) {
                                //     $this.genData.parentSystem = $this.allSystem[0].id
                                // }
                                // if (!$this.genData.parentMenuId && $this.parentMenus) {
                                //     $this.genData.parentMenuId = $this.parentMenus[0].id
                                // }
                            }
                        })
                    },
                    showUpdateGenData(fun) {
                        var $this = this
                        this.ajax("/gen/genData/genDataById", { genDataId: this.genDataId }, (res) => {
                            if (res.data) {
                                this.genData = res.data
                                this.addGenDataVisible = true
                                if (fun) {
                                    fun(res)
                                }
                                if (!this.genData.parentSystem && this.allSystem) {
                                    this.genData.parentSystem = this.allSystem[0].id
                                }
                                if (!this.genData.parentMenuId && this.parentMenus) {
                                    this.genData.parentMenuId = this.parentMenus[0].id
                                }

                                this.ajax('/gen/kv/getDataKv', {dataId: this.genData.id},(res) => {
                                    if (res.data) {
                                        this.frontKvList = res.data.filter(s=>s.source === '6')
                                        this.backKvList = res.data.filter(s=>s.source === '3')
                                    }
                                })
                            }
                        })
                    },
                    addGenData(fun) {
                        var $this = this
                        if (this.genData.id) {
                            this.ajax(
                                "/gen/genData/updateGenData",
                                {genData: this.genData, dataKvList: [...this.frontKvList, ...this.backKvList]},
                                function (res) {
                                    $this.addGenDataVisible = false
                                    $this.getGenDataList()
                                    $this.success("修改数据集成功！")
                                },
                                { contentType: "json" }
                            )
                        } else {
                            this.ajax(
                                "/gen/genData/addGenData",
                                {genData: this.genData, dataKvList: [...this.frontKvList, ...this.backKvList]},
                                function (res) {
                                    $this.addGenDataVisible = false
                                    $this.getGenDataList()
                                    $this.success("新增数据集成功！")
                                },
                                { contentType: "json" }
                            )
                        }
                    },
                    delGenData(fun) {
                        var $this = this
                        this.ajax("/gen/genData/delGenData", { id: this.genDataId }, function (res) {
                            $this.addGenDataVisible = false
                            $this.getGenDataList()
                            $this.info("删除数据集成功！")
                            $this.genDataId = 0
                        })
                    },
                    getGenDataList(fun) {
                        var $this = this
                        this.ajax("/gen/genData/genDataList", function (res) {
                            $this.genDataList = res.data
                            if (fun && res.data) {
                                fun(res)
                            }
                        })
                    },
                    getTables(fun) {
                        var $this = this
                        if (this.selectedDatabaseId!=null) {
                            this.tableSearch.dataBaseId = this.selectedDatabaseId
                        }

                        this.ajax("/gen/table/getAllTables", this.tableSearch, function (res) {
                            $this.tables = res.data
                            $this.tableCount = res.dataCount
                            if (fun && res.data) {
                                fun(res)
                            }
                        })
                    },
                    addGenTables() {
                        var $this = this
                        if (this.selectedTables.length === 0) {
                            this.$message.error("请选择至少一条数据")
                            return
                        }
                        this.ajax(
                            "/gen/genTable/addGenTable",
                            { name: "", dataBaseId: this.selectedDatabaseId, genDataId: this.genDataId, tables: this.selectedTables },
                            function (res) {
                                $this.getGenTable()
                                $this.success("新增数据结构成功！")
                                $this.closeAddTablePage()
                                $this.useDataVisible = false
                            },
                            { contentType: "json" }
                        )
                    },
                    delGenTable(data) {
                        var $this = this
                        this.ajax("/gen/genTable/delGenTable", { id: data.id }, function (res) {
                            $this.getGenTable()
                            $this.info(data.tableName + "删除成功！")
                        })
                    },
                    getGenTable(reset) {
                        if (reset && reset === true) {
                            this.genTableSearcher.pageNo = 1
                            delete this.genTableSearcher.tableName
                            delete this.genTableSearcher.tableName
                        }
                        var $this = this
                        this.ajax("/gen/genTable/getGenTable", this.genTableSearcher, function (res) {
                            $this.genTableCount = res.dataCount
                            $this.genTables = res.data
                        })
                    },
                    showUpdateGenTable(data) {
                        this.ajax('/gen/kv/getDataKv', {dataId: data.dataId}, (res) => {
                            if (res.data) {
                                this.frontKvList = res.data.filter(s=>s.source === '6')
                                this.backKvList = res.data.filter(s=>s.source === '3')
                            }
                            this.ajax('/gen/kv/getGenKv',  {tableId: data.id}, (res) => {
                                if (res.data&&res.data.length>0) {
                                    this.frontGenKvList = res.data.filter(s=>s.source === '6')
                                    this.backGenKvList = res.data.filter(s=>s.source === '3')

                                    this.backKvList.forEach(s=> {
                                        var find = this.backGenKvList.find(x=>x.kvId === s.id)
                                        if (find) {
                                            s.value.value = find.value
                                        }
                                    })

                                    this.frontKvList.forEach(s=> {
                                        var find = this.frontGenKvList.find(x=>x.kvId === s.id)
                                        if (find) {
                                            s.value.value = find.value
                                        }
                                    })
                                }
                            })
                        })
                        this.showType = 1
                        this.tableName = data.tableName
                        this.genTable = data
                        if (!this.genTable.parentSystem && this.allSystem) {
                            this.genTable.parentSystem = this.allSystem[0].id
                        }
                        if (!this.genTable.parentMenuId && this.parentMenus) {
                            this.genTable.parentMenuId = this.parentMenus[0].id
                        }
                    },
                    gotoShowTypeTwo() {
                        if (this.showType === 1) {
                            this.updateGenTable()
                        }
                        // console.log("gotoShowTypeTwo", this.genTable)
                        this.fieldSearcher.genTableId = this.genTable.id
                        var $this = this
                        this.getTableFields(false, (res) => {
                            $this.showType = 2
                        })
                    },
                    updateGenTable() {
                        this.showType = 2
                        var $this = this

                        var findNotExists = this.backKvList.filter(s=>this.backGenKvList.filter(x=>s.id === x.kvId).length===0)
                        this.backGenKvList.forEach(s=> {
                            var find = this.backKvList.find(x=>s.kvId === x.id)
                            if (find) {
                                s.value = find.value.value
                                s.label = find.value.name
                            }
                        })
                        findNotExists.forEach(s=> {
                            this.backGenKvList.push({
                                "kvId": s.id,
                                "key": s.key,
                                "dataId": s.dataId,
                                "tableId": this.genTable.id,
                                "source": "3",
                                "type": s.type,
                                "label": s.value.name,
                                "value": s.value.value,
                            })
                        })


                        findNotExists = this.frontKvList.filter(s=>this.frontGenKvList.filter(x=>s.id === x.kvId).length===0)
                        this.frontGenKvList.forEach(s=> {
                            var find = this.frontKvList.find(x=>s.kvId === x.id)
                            if (find) {
                                s.value = find.value.value
                                s.label = find.value.name
                            }
                        })
                        findNotExists.forEach(s=> {
                            this.frontGenKvList.push({
                                "kvId": s.id,
                                "key": s.key,
                                "dataId": s.dataId,
                                "tableId": this.genTable.id,
                                "source": "3",
                                "type": s.type,
                                "label": s.value.name,
                                "value": s.value.value,
                            })
                        })

                        this.ajax(
                            "/gen/genTable/updateGenTable",
                            {genTable: this.genTable, genKvList: [...this.frontGenKvList, ...this.backGenKvList]},
                            function (res) {
                                if (res) {
                                    $this.success("修改生成表成功！")
                                    $this.fieldSearcher.genTableId = $this.genTable.id
                                    $this.getTableFields()
                                }
                            },
                            { contentType: "json" }
                        )
                    },
                    getAllSystem(fun) {
                        this.ajax("/gen/system/getAllSystem", function (res) {
                            if (fun && res.data) {
                                fun(res)
                            }
                        })
                    },
                    getParentMenus(fun) {
                        this.ajax("/gen/system/getParentMenus", function (res) {
                            if (fun && res.data) {
                                fun(res)
                            }
                        })
                    },
                    getTableFields(reset, func) {
                        if (reset && reset === true) {
                            this.fieldSearcher.pageNo = 1
                            delete this.fieldSearcher.columnName
                            delete this.fieldSearcher.columnComment
                        }
                        var $this = this
                        this.ajax("/gen/genField/getGenField", this.fieldSearcher, function (res) {
                            if (res.data) {
                                res.data.forEach((d) => {
                                    d.is_update = true
                                    d.addFlag = d.addFlag === "1" ? true : false
                                    d.editFlag = d.editFlag === "1" ? true : false
                                    d.listFlag = d.listFlag === "1" ? true : false
                                    d.queryFlag = d.queryFlag === "1" ? true : false
                                })
                                $this.genFieldCount = res.dataCount
                                $this.genField = res.data
                                if (func) {
                                    func(res)
                                }
                            }
                        })
                    },
                    showUpdateField(data) {
                        if (!data.is_update) {
                            data.is_update = true
                        }
                    },
                    updateField(data) {
                        data.addFlag = data.addFlag ? "1" : "0"
                        data.editFlag = data.editFlag ? "1" : "0"
                        data.listFlag = data.listFlag ? "1" : "0"
                        data.queryFlag = data.queryFlag ? "1" : "0"
                        var $this = this
                        this.ajax(
                            "/gen/genField/updateGenField",
                            data,
                            function (res) {
                                $this.success("修改成功")
                                data.is_update = false
                                data.addFlag = data.addFlag === '1'
                                data.editFlag = data.editFlag === '1'
                                data.listFlag = data.listFlag === '1'
                                data.queryFlag = data.queryFlag === '1'
                            },
                            { contentType: "json" }
                        )
                    },
                    delField(data) {},
                    showAddTablePage(reset) {
                        // console.log("reset", reset)
                        if (reset && reset === true) {
                            this.tableSearch.pageNo = 1
                            delete this.tableSearch.tableName
                            delete this.tableSearch.tableComment
                            delete this.tableSearch.beginCreateTime
                            delete this.tableSearch.endCreateTime
                        }
                        this.getDatabases(res=>{
                            this.databases = res.data
                            if (this.firstLoadDatabasePage) {
                                this.selectedDatabaseId = this.databases[0].id
                                this.firstLoadDatabasePage = false
                            }
                            this.getTables(res => {
                                this.addTableShowFlag = true
                            })
                        })
                        // this.getTables((res) => {
                        //     this.addTableShowFlag = true
                        // })
                    },
                    changeIcon(icon, type) {
                        if (this.iconSelectType === '3') {
                            this.genTable.menuIcon = icon
                        }
                        if (this.iconSelectType === '6') {
                            this.genData.menuIcon = icon
                        }
                        this.iconDialogVisible = false
                    },
                    success(msg) {
                        this.$notify({
                            title: "成功",
                            type: "success",
                            message: msg,
                        })
                    },
                    info(msg) {
                        this.$notify.info({
                            title: "消息",
                            message: msg,
                            position: "bottom-right",
                        })
                    },
                    checkoutSetAll(val, name, children) {
                        var $this = this
                        var nameAttr = children.map((s) => s.name)
                        // console.log('nameAttr', nameAttr);
                        if (val === "1") {
                            for (let key of Object.keys(this.downloadSetting)) {
                                if (nameAttr.includes(key)) {
                                    $this.downloadSetting[key] = "1"
                                    $this.downloadSetting[name + "_all"] = "1"
                                }
                            }
                        }
                        if (val === "0") {
                            for (let key of Object.keys(this.downloadSetting)) {
                                if (nameAttr.includes(key)) {
                                    $this.downloadSetting[key] = "0"
                                    $this.downloadSetting[name + "_all"] = "0"
                                }
                            }
                        }
                    },
                    toggleCodeViewPanel(tab, event) {
                        // console.log('toggleCodeViewPanel', tab, event);
                        // console.log(this.codeList);
                        var item = this.codeList.filter((s) => s.fileName === this.templates[tab.name])[0]
                        if (item) {
                            this.editor.setValue(item.code)
                            this.editor.session.setMode("ace/mode/" + item.language)
                            this.editor.gotoLine(1)
                        }
                    },
                    changeCodeViewTemplate(val, item) {
                        this.codeTab = null
                        this.$set(this.templates, item.name, val)
                        // this.templates[item.name] = val

                        var item = this.codeList.filter((s) => s.fileName === val)[0]
                        if (item) {
                            this.editor.setValue(item.code)
                            this.editor.session.setMode("ace/mode/" + item.language)
                            this.editor.gotoLine(1)
                        }
                        this.codeTab = item.name
                    },
                    changeEndPoint() {
                        // console.log(this.endPoint);
                        // console.log('this.endPoint', this.endPoint);
                        var $this = this
                        this.ajax(
                            "/gen/preview",
                            { genTableId: this.genTable.id, tableName: this.genTable.tableName, endPoint: this.endPoint },
                            function (res) {
                                $this.codeList = res.data
                                var first = $this.codeList[0]
                                console.log("first", first)
                                $this.codeTab = first.parentDir
                                $this.editor.session.setMode("ace/mode/" + first.language)
                                $this.editor.setValue(first.code)
                                $this.editor.gotoLine(1)
                            },
                            { type: "GET" }
                        )
                    },
                    showCodeView() {
                        var $this = this
                        this.ajax("/gen/template/getAllTemplate", (res) => {
                            // console.log(res.data)
                            $this.templateTree = res.data
                            if ($this.endPoint === "") {
                                $this.endPoint = $this.templateTree[0].name
                            }
                            // console.log('change template');
                            var attr = {}
                            $this.templateTree.forEach((item) => {
                                item.children.forEach((iitem) => {
                                    attr[iitem.name] = []
                                    iitem.children.forEach((iiitem) => {
                                        attr[iitem.name].push(iiitem.fileName)
                                    })
                                })
                            })
                            console.log('attr[key]', attr);
                            Object.keys(attr).forEach((key) => {
                                // $this.templates[key] = attr[key][0]
                                if (attr[key].includes($this.templates[key])) {
                                } else {
                                    $this.$set($this.templates, key, attr[key][0])
                                }
                                if ($this.templates[key]) {
                                } else {
                                    $this.$set($this.templates, key, attr[key][0])
                                }
                            })
                            $this.loadCodeView()
                        })
                    },
                    loadCodeView() {
                        // console.log('this.endPoint', this.endPoint);
                        var $this = this
                        this.ajax(
                            "/gen/preview",
                            { genTableId: this.genTable.id, tableName: this.genTable.tableName, endPoint: this.endPoint },
                            function (res) {
                                $this.showType = 3
                                $this.codeList = res.data
                                var first = {}
                                if ($this.codeList.length > 0) {
                                    first = $this.codeList[0]
                                }

                                setTimeout(() => {
                                    // console.log('$this.$refs[backEndCode]', $this.$refs['backEndCode']);
                                    //初始化对象 = ace.edit(this.$refs['code'], {});
                                    $this.editor = ace.edit($this.$refs["backEndCode"])
                                    //设置风格和语言（更多风格和语言，请到github上相应目录查看）
                                    $this.editor.setTheme("ace/theme/monokai")
                                    $this.editor.session.setTabSize(4)
                                    // 设置代码折叠
                                    $this.editor.session.setUseWrapMode(true)
                                    // 字体大小
                                    $this.editor.setFontSize(14)
                                    // 设置高亮
                                    $this.editor.setHighlightActiveLine(true)
                                    // 设置打印边距可见度
                                    $this.editor.setShowPrintMargin(false)
                                    //设置只读（true时只读，用于展示代码）
                                    $this.editor.setReadOnly(true)
                                    //自动换行,设置为off关闭
                                    // $this.editor.setOptions({
                                    //     enableBasicAutocompletion: true,
                                    //     enableSnippets: true,
                                    //     enableLiveAutocompletion: true,
                                    //     wrap: 'free' //自动换行
                                    // });

                                    // var content = '<!DOCTYPE html><html><head>ACE入门</head><body><h1>hello huangbaokang</h1></body></html>';
                                    // $this.editor.setValue(content);
                                    // $this.editor.setValue('');
                                    if (first.language) {
                                        $this.editor.session.setMode("ace/mode/" + first.language)
                                        $this.editor.setValue(first.code)
                                        $this.editor.gotoLine(1)
                                    }
                                }, 200)
                                if (first.parentDir) {
                                    $this.codeTab = first.parentDir
                                }
                            },
                            { type: "GET" }
                        )
                    },
                    showCodeDownload() {
                        var $this = this
                        if (this.templateTree.length === 0) {
                            this.ajax("/gen/template/getAllTemplate", (res) => {
                                // console.log(res.data)
                                $this.templateTree = res.data

                                var attr = {}
                                $this.templateTree.forEach((item) => {
                                    $this.$set(this.downloadSetting, item.name + "_all", "1")
                                    item.children.forEach((iitem) => {
                                        // $this.downloadSetting[iitem.name] = '1'
                                        $this.$set($this.downloadSetting, iitem.name, "1")
                                        attr[iitem.name] = []
                                        iitem.children.forEach((iiitem) => {
                                            attr[iitem.name].push(iiitem.fileName)
                                        })
                                        // if ($this.templates[iitem.name]) {
                                        // } else {
                                        //     $this.$set($this.templates, iitem.name, iitem.children[0].fileName)
                                        // }
                                    })
                                })
                                Object.keys(attr).forEach((key) => {
                                    if (attr[key].includes($this.templates[key])) {
                                    } else {
                                        $this.$set($this.templates, key, attr[key][0])
                                    }
                                    if ($this.templates[key]) {
                                    } else {
                                        $this.$set($this.templates, key, attr[key][0])
                                    }
                                })
                                localStorage.removeItem("templates",);//删除单个数据
                                localStorage.setItem("templates",JSON.stringify($this.templates));//保存数据
                                $this.showType = 4
                            })
                        } else {
                            var attr = {}
                            this.templateTree.forEach((item) => {
                                $this.$set(this.downloadSetting, item.name + "_all", "1")
                                item.children.forEach((iitem) => {
                                    // $this.downloadSetting[iitem.name] = '1'
                                    $this.$set($this.downloadSetting, iitem.name, "1")

                                    attr[iitem.name] = []
                                    iitem.children.forEach((iiitem) => {
                                        attr[iitem.name].push(iiitem.fileName)
                                    })
                                    // if ($this.templates[iitem.name]) {
                                    // } else {
                                    //     $this.$set($this.templates, iitem.name, iitem.children[0].fileName)
                                    // }
                                })
                            })
                            Object.keys(attr).forEach((key) => {
                                if (attr[key].includes($this.templates[key])) {
                                } else {
                                    $this.$set($this.templates, key, attr[key][0])
                                }
                                if ($this.templates[key]) {
                                } else {
                                    $this.$set($this.templates, key, attr[key][0])
                                }
                            })
                            localStorage.removeItem("templates",);//删除单个数据
                            localStorage.setItem("templates",JSON.stringify(this.templates));//保存数据
                            this.showType = 4
                        }
                    },
                    download(endPoint) {
                        var data = {
                            genTableId: this.genTable.id,
                            tableName: this.genTable.tableName,
                            downloadSetting: this.downloadSetting,
                            templates: this.templates,
                        }
                        if (endPoint) {
                            data["endPoint"] = endPoint
                        } else {
                            data["endPoint"] = "all"
                        }
                        this.ajax("/gen/download", data, function (res) {}, { contentType: "json", download: true, fileName: this.genTable.tableName + "-" + data["endPoint"] + ".zip" })
                        // window.location = `${api_url}/gen/download?tableName=${this.genTable.tableName}&endPoint=${endPoint}`
                    },
                    // 新增kv
                    addDataKv() {
                        var obj = {'name':this.formDataKv.label}
                        obj['value'] = this.formDataKv.value
                        var submitObj = Object.assign({}, this.formDataKv, {value: obj, dataId: this.genData.id})
                        this.ajax('/gen/kv/addDataKv', submitObj, res=>{
                            if (res.data) {
                                this.success('新增自定义信息成功！')
                                let dataKv = res.data
                                if (dataKv.source === '3') {
                                    this.backKvList.push(dataKv)
                                } else {
                                    this.frontKvList.push(dataKv)
                                }
                                this.formDataKv = {}
                                this.closeDataKvPage()
                            }
                        }, {contentType: 'json'})
                    },
                    // 删除kv
                    delDataKv(data) {
                        // console.log('delDataKv', data);
                        this.ajax('/gen/kv/delDataKv', {id: data.id}, res=>{
                            this.info('删除自定义信息成功！')
                            this.closeDataKvPage()
                            if (data.source === '3') {
                                this.arrayDelete(this.backKvList, data)
                            } else {
                                this.arrayDelete(this.frontKvList, data)
                            }
                        })
                    },
                    closeAddTablePage() {
                        this.addTableShowFlag = false
                    },
                    changeDatabase(val) {
                        this.showAddTablePage()
                    },
                    showAddDatabasePage() {
                        this.database = {
                            name: "",
                            type: "1",
                            username: "",
                            password: "",
                            conType: "1",
                            host: "",
                            port: "3306",
                            dataSchema: "",
                            jdbcUrl: "",
                        }
                        this.addDatabaseShowFlag = true
                    },
                    showUpdateDatabasePage() {
                        var find = this.databases.find(s=>s.id===this.selectedDatabaseId)
                        if (find) {
                            this.database = find
                            this.addDatabaseShowFlag = true
                        }
                    },
                    delDatabase() {
                        this.ajax('/gen/database/delDatabase', {id: this.selectedDatabaseId}, res=> {
                            var find = this.databases.find(s=>s.id===this.selectedDatabaseId)
                            if (find) {
                                this.arrayDelete(this.databases, find)
                                if (this.databases.length>0) {
                                    this.selectedDatabaseId = this.databases[0].id
                                } else {
                                    this.selectedDatabaseId = null
                                }
                                this.showAddTablePage()
                            }
                        })
                    },
                    getDatabases(fun) {
                        this.ajax("/gen/database/getAllDatabase", function (res) {
                            if (fun && res.data) {
                                fun(res)
                            }
                        })
                    },
                    addDatabase() {
                        var $this = this
                        this.ajax(
                            "/gen/database/addDatabase",
                            this.database,
                            function (res) {
                                if (res.data) {
                                    $this.$notify({
                                        title: "成功",
                                        type: "success",
                                        message: "新增数据源成功",
                                    })
                                    if ($this.databases.find(s=>s.id === res.data.id)) {

                                    } else {
                                        $this.databases.push(res.data)
                                    }
                                    $this.closeAddDatabasePage()
                                }
                            },
                            { contentType: "json" }
                        )
                    },
                    closeAddDatabasePage() {
                        this.addDatabaseShowFlag = false
                    },
                    showIconSelectPage(type) {
                        this.iconSelectType = type
                        this.iconDialogVisible = true
                    },
                    closeIconSelectPage() {
                        this.iconDialogVisible = false
                    },
                    showAddDataKvPage(val) {
                        this.formDataKv = {}
                        this.formDataKv['source'] = val === 'back'?'3':'6'
                        this.dataKvDialogVisible = true
                    },
                    closeDataKvPage() {
                        this.dataKvDialogVisible = false
                    },
                    indexMethod(index,obj) {
                        return (obj.pageNo - 1) * obj.pageSize + index + 1
                    },
                    handleCurrentChange(currentRow, oldCurrentRow) {
                        // console.log(currentRow, oldCurrentRow);
                    },
                    handlerTableClick(row, column, event) {
                        row.flag = !row.flag
                        // console.log(row, column, event);
                        this.$refs.tables.toggleRowSelection(row, row.flag)
                    },
                    handlerGenTableDblclick(row, column, event) {
                        // console.log(row, column, event);
                        this.showUpdateGenTable(row)
                    },
                    handlerTableDblclick(row, column, event) {
                        // console.log(row, column, event);
                        this.selectedTables = [row]
                        var $this = this
                        this.getGenDataList(() => {
                            $this.useDataVisible = true
                        })
                    },
                    tableSelectionChange(selection) {
                        // console.log(selection);
                        this.selectedTables = selection
                    },
                    handlerFieldDblclick(row, column, event) {
                        // console.log(row, column, event);
                        if (!row.is_update || row.is_update == false) {
                            row.is_update = true
                        } else {
                            row.addFlag = row.addFlag ? "1" : "0"
                            row.editFlag = row.editFlag ? "1" : "0"
                            row.listFlag = row.listFlag ? "1" : "0"
                            row.queryFlag = row.queryFlag ? "1" : "0"
                            var $this = this
                            this.ajax(
                                "/gen/genField/updateGenField",
                                row,
                                function (res) {
                                    $this.success("修改成功")
                                    row.is_update = false
                                },
                                { contentType: "json" }
                            )
                        }
                        // console.log('row', row)
                    },
                    sort({ column, prop, order }) {
                        // console.log(column, prop, order, LABEL_KEY_MAP[column.label]);
                    },
                    tableChangeCreateTime(val) {
                        var begin = val[0]
                        var end = val[1]
                        this.tableSearch.beginCreateTime = begin
                        this.tableSearch.endCreateTime = end
                        delete this.tableSearch.createTime
                    },
                    changeTablePage: function (val) {
                        this.tableSearch.pageNo = val
                        this.getTables()
                    },
                    changeTablePageSize: function (val) {
                        this.tableSearch.pageSize = val
                        this.getTables()
                    },
                    changeGenTablePage: function (val) {
                        this.genTableSearcher.pageNo = val
                        this.getGenTable()
                    },
                    changeGenTablePageSize: function (val) {
                        this.genTableSearcher.pageSize = val
                        this.getGenTable()
                    },
                    changeGenFieldPage: function (val) {
                        this.fieldSearcher.pageNo = val
                        this.getTableFields()
                    },
                    changeGenFieldPageSize: function (val) {
                        this.fieldSearcher.pageSize = val
                        this.getTableFields()
                    },
                    // 刷新分页
                    changePage: function (val) {},
                    // 刷新分页
                    changeSize: function (val) {
                        this.$emit("update:size", val)
                        this.$emit("change")
                    },
                    showTemplateAllParamsPage() {
                        this.ajax('/gen/template/getTemplateAllParams', {genTableId: this.genTable.id}, res=> {
                            if (res.data) {
                                this.templateAllParams = res.data
                            }
                            this.templateAllParamsDialogVisible = true
                        })
                    },
                    closeTemplateAllParamsPage() {
                        this.templateAllParamsDialogVisible = false
                    },
                    saveDownSetting() {
                        localStorage.removeItem("templates",);//删除单个数据
                        localStorage.setItem("templates",JSON.stringify(this.templates));//保存数据
                        this.$message({
                            message: '保存成功',
                            type: 'success'
                        });
                    },
                    closeTestTemplatePage() {
                        this.testTemplateShowFlag = false
                    },
                    showTestTemplatePage() {
                        this.testTemplateShowFlag = true
                        var $this = this
                        setTimeout(() => {
                            //初始化对象 = ace.edit(this.$refs['code'], {});
                            $this.editor2 = ace.edit($this.$refs["testCode"])
                            //设置风格和语言（更多风格和语言，请到github上相应目录查看）
                            $this.editor2.setTheme("ace/theme/monokai")
                            $this.editor2.session.setTabSize(4)
                            // 设置代码折叠
                            $this.editor2.session.setUseWrapMode(true)
                            // 字体大小
                            $this.editor2.setFontSize(12)
                            // 设置高亮
                            // $this.editor2.setHighlightActiveLine(true)
                            // 设置打印边距可见度
                            $this.editor2.setShowPrintMargin(false)
                            //设置只读（true时只读，用于展示代码）
                            $this.editor2.setReadOnly(false)
                            $this.editor2.$blockScrolling = Infinity
                            //自动换行,设置为off关闭
                            $this.editor2.setOptions({
                                enableBasicAutocompletion: true,
                                enableSnippets: true,
                                enableLiveAutocompletion: true,
                                wrap: 'free' //自动换行
                            })
                            if (this.testTemplateContent===''||this.testTemplateContent === null) {
                                var content = '${t.tableName} 点击编译看看！！';
                                $this.editor2.setValue(content);
                            } else {
                                $this.editor2.setValue(this.testTemplateContent);
                            }
                            $this.editor2.session.setMode("ace/mode/javascript")
                            $this.editor2.gotoLine(1)
                            $this.editor2.session.on('change', $this.throttle((res)=> {
                                // 每2S自动保存
                                $this.saveTestTemplateContent($this.editor2.getValue())
                                $this.saveTestTemplateContentTip = '自动保存于 ' + $this.getDataTime()
                            }, 2000))

                            //初始化对象 = ace.edit(this.$refs['code'], {});
                            $this.editor3 = ace.edit($this.$refs["testCodeResult"])
                            //设置风格和语言（更多风格和语言，请到github上相应目录查看）
                            $this.editor3.setTheme("ace/theme/monokai")
                            $this.editor3.session.setTabSize(4)
                            // 设置代码折叠
                            $this.editor3.session.setUseWrapMode(true)
                            // 字体大小
                            $this.editor3.setFontSize(12)
                            // 设置高亮
                            // $this.editor3.setHighlightActiveLine(true)
                            // 设置打印边距可见度
                            $this.editor3.setShowPrintMargin(false)
                            //设置只读（true时只读，用于展示代码）
                            $this.editor3.setReadOnly(true)
                            //自动换行,设置为off关闭
                            $this.editor3.setOptions({
                                enableBasicAutocompletion: true,
                                enableSnippets: true,
                                enableLiveAutocompletion: true,
                                wrap: 'free' //自动换行
                            });
                            $this.editor3.session.setMode("ace/mode/javascript")
                            $this.editor3.gotoLine(1)
                        }, 200)
                    },
                    getDataTime() {
                        var checkTime = function (i) {
                            if (i < 10) {
                                i = "0" + i;
                            }
                            return i;
                        }
                        var nowdate = new Date();
                        var year = nowdate.getFullYear(),
                            month = nowdate.getMonth() + 1,
                            date = nowdate.getDate(),
                            day = nowdate.getDay(),
                            week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
                            h = nowdate.getHours(),
                            m = nowdate.getMinutes(),
                            s = nowdate.getSeconds(),
                            h = checkTime(h),
                            m = checkTime(m),
                            s = checkTime(s);
                        return year + "年" + month + "月" + date + "日" + week[day] + " " + h +":" + m + ":" + s;
                    },
                    saveTestTemplateContent(val) {
                        this.testTemplateContent = val
                        localStorage.removeItem("testTemplateContent",)
                        localStorage.setItem("testTemplateContent", val)
                    },
                    compileCode() {
                        this.ajax(
                            '/gen/complieCode',
                            { genTableId: this.genTable.id, value: this.editor2.getValue()},
                            (res) => {
                                if (res.data) {
                                    this.editor3.setValue(res.data);
                                    this.editor3.gotoLine(1)
                                }
                            }, {contentType: 'json'}
                        )
                    },
                    showParamDrawerPage() {
                        this.ajax('/gen/template/getTemplateAllParams', {genTableId: this.genTable.id}, res=> {
                            if (res.data) {
                                this.templateAllParams = res.data
                            }
                            this.paramDrawerFlag = true
                        })
                    },
                    closeParamDrawerPage() {
                        this.paramDrawerFlag = false
                    },
                    // 从数组删除指定记录
                    arrayDelete(arr, item) {
                        if (item instanceof Array) {
                            for (let i = 0; i < item.length; i++) {
                                let ite = item[i]
                                let index = arr.indexOf(ite)
                                if (index > -1) {
                                    arr.splice(index, 1)
                                }
                            }
                        } else {
                            var index = arr.indexOf(item)
                            if (index > -1) {
                                arr.splice(index, 1)
                            }
                        }
                    },
                     //节流
                    throttle(fn,interval){
                        var last;
                        var timer;
                        var interval=interval||200;
                        return function(){
                            var th=this;
                            var args=arguments;
                            var now=+new Date();
                            if(last&&now-last<interval){
                                clearTimeout(timer);
                                timer=setTimeout(function(){
                                    last=now;
                                    fn.apply(th,args);
                                },interval);
                            }else{
                                last=now;
                                fn.apply(th,args);
                            }
                        }
                    },
                    // json合并
                    extendJson(userOption, defaultOption) {
                        if (!userOption) {
                            return defaultOption
                        }
                        for (var key in defaultOption) {
                            if (userOption[key] === undefined) {
                                userOption[key] = defaultOption[key]
                            } else if (userOption[key] == null) {
                            } else if (typeof userOption[key] == "object") {
                                this.extendJson(userOption[key], defaultOption[key]) //深度匹配
                            }
                        }
                        return userOption
                    },
                    ajax(url, data, success200, cfg) {
                        // console.log('ajax', url, 'data', data);
                        var $this = this
                        // 如果是简写模式(省略了data参数)
                        if (typeof data === "function") {
                            files = cfg
                            cfg = success200
                            success200 = data
                            data = {}
                        }
                        // 默认配置
                        var defaultCfg = {
                            msg: "努力加载中...", // 提示语
                            baseUrl: url.indexOf("http") === 0 ? "" : api_url, // 父url，拼接在url前面
                            sleep: 0, // 休眠n毫秒处理回调函数
                            type: "post", // 默认请求类型
                            contentType: "application/x-www-form-urlencoded;charset=UTF-8",
                            success200: success200, // code=200, 代表成功
                            success500: function (res) {
                                // code=500, 代表失败
                                return $this.$message("失败：" + res.msg)
                            },
                            success403: function (res) {
                                // code=403, 代表权限不足
                                return $this.$message("权限不足," + res.msg, { icon: 5 })
                            },
                            errorfn: function (xhr, type, errorThrown) {
                                // ajax发生异常时的默认处理函数
                                if (xhr.status == 0) {
                                    return $this.$message("无法连接到服务器，请检查网络")
                                }
                                return $this.$message("异常：" + JSON.stringify(xhr))
                            },
                            complete: function (xhr, ts) {
                                // 成功失败都会执行
                            },
                        }
                        cfg = this.extendJson(cfg, defaultCfg)
                        if (cfg.contentType && (cfg.contentType == "application/json;charset=UTF-8" || cfg.contentType == "json")) {
                            cfg.contentType = "application/json;charset=UTF-8"
                            data = JSON.stringify(data)
                        }
                        let loading = $this.$loading({ fullscreen: true })
                        var objoo = {
                            url: cfg.baseUrl + url,
                            type: cfg.type,
                            // data: data,
                            data: data,
                            contentType: cfg.contentType,
                            // xhrFields: {
                            // 	withCredentials: true // 携带跨域cookie
                            // },
                            // crossDomain: true,
                            beforeSend: function (xhr) {
                                xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest")
                                // 追加token
                                // if(localStorage.tokenName) {
                                //     xhr.setRequestHeader(localStorage.tokenName, localStorage.tokenValue);
                                // }
                            },
                            success: function (res) {
                                console.log("返回数据：", res)
                                if (cfg.download) {
                                    setTimeout(function () {
                                        // 如果相应的处理函数存在
                                        let blob = new Blob([res], { type: "application/octet-stream" })
                                        const a = document.createElement("a")
                                        a.href = URL.createObjectURL(blob)
                                        a.download = cfg.fileName
                                        a.click()
                                        URL.revokeObjectURL(a.href)
                                        a.remove()
                                    }, cfg.sleep)
                                }
                                setTimeout(function () {
                                    loading.close()
                                    // 如果相应的处理函数存在
                                    if (cfg["success" + res.code] != undefined) {
                                        return cfg["success" + res.code](res)
                                    }
                                }, cfg.sleep)
                            },
                            error: function (xhr, type, errorThrown) {
                                setTimeout(function () {
                                    loading.close()
                                    return cfg.errorfn(xhr, type, errorThrown)
                                }, cfg.sleep)
                            },
                            complete: cfg.complete,
                        }
                        if (cfg.download) {
                            // console.log('cfg', cfg);
                            objoo["responseType"] = "blob"
                            objoo["xhrFields"] = { responseType: "arraybuffer" }
                        } else {
                            objoo["dataType"] = "json"
                        }
                        return $.ajax(objoo)
                    },
                },
                components: {
                    "z-input": {
                        props: {
                            'span':{type: Number, default: 12},
                            'label':{},
                            'value':{},
                            'tips':{},
                            'disabled': {type: Boolean, default: false},
                            'required':{type: Boolean, default: false},
                            'btn':{type: Boolean, default: false},
                            'btnName':{type: String, default: '按钮'},
                            'btnFunc':{type: Function},
                        },
                        data() {
                            return {
                            }
                        },
                        methods:{
                            clickBtn() {
                                this.$emit('btn-func', this.value)
                            }
                        },
                        template:
                            '<el-col :span="span">'+
                            '    <el-form-item :rules="required?[{ required: true, message: \'请输入\'+label }, ]:[]">'+
                            '        <template slot="label">'+
                            '            <span>{{label}}</span>'+
                            '            <el-tooltip placement="top" v-if=\'tips\'>'+
                            '                <div slot="content">{{tips}}</div>'+
                            '                <i class="el-icon-warning"></i>'+
                            '            </el-tooltip>'+
                            '        </template>'+
                            '        <el-input v-bind:value="value" @input="$emit(\'input\', $event)" :disabled="disabled" clearable>'+
                            '            <el-button v-if="btn" type="primary" slot="append" @click="clickBtn">{{btnName}}</el-button>'+
                            '         </el-input>'+
                            '    </el-form-item>'+
                            '</el-col>',
                    },
                    "z-radio": {
                        props: {
                            'span':{type: Number, default: 12},
                            'label':{},
                            'value':{},
                            'tips':{},
                            'required':{type: Boolean, default: false},
                            'children':{type: Object, default: function() {
                                return {}
                            }},
                        },
                        data() {
                            return {
                            }
                        },
                        template:
                            '<el-col :span="span">'+
                            '    <el-form-item :rules="required?[{ required: true, message: \'请输入\'+label }, ]:[]">'+
                            '        <template slot="label">'+
                            '            <span>{{label}}</span>'+
                            '            <el-tooltip placement="top" v-if=\'tips\'>'+
                            '                <div slot="content">{{tips}}</div>'+
                            '                <i class="el-icon-warning"></i>'+
                            '            </el-tooltip>'+
                            '        </template>'+
                            '        <el-radio-group v-bind:value="value" @input="$emit(\'input\', $event)">'+
                            '           <slot></slot>'+
                            '           <template v-if="Object.keys(children).length>0" v-for="keyName in Object.keys(children)"><el-radio :label="keyName">{{children[keyName]}}</el-radio></template>'+
                            '        </el-radio-group>'+
                            '    </el-form-item>'+
                            '</el-col>',
                    },
                    "z-td": {
                        props: ["label", "type", "status", "fieldName", "width"],
                        data() {
                            return {
                            }
                        },
                        methods: {
                        },
                        render(h) {
                            var $this = this
                            var columnProps = {
                                label: $this.label,
                            }
                            if ($this.width) {
                                columnProps['min-width'] = $this.width
                            }
                            return h(
                                'el-table-column',
                                {
                                        domProps: {},
                                        props: columnProps,
                                        scopedSlots: {
                                            default: s => {
                                                // console.log('s', s.row);
                                                var child = []
                                                if (s.row[$this.status]) {
                                                    if ($this.type&&$this.type==='radio') {
                                                        child = [h('el-switch', {
                                                            domProps: {
                                                                value: s.row[$this.fieldName]
                                                            },
                                                            props: {
                                                                value: s.row[$this.fieldName]
                                                            },
                                                            on: {
                                                                input: function(event) {
                                                                    // console.log('on input', event);
                                                                    s.row[$this.fieldName] = event
                                                                    // $this.$emit('input', event)
                                                                }
                                                            }
                                                        })]
                                                    } else if ($this.type&&$this.type==='yn') {
                                                        if (s.row[$this.fieldName] === '1') {
                                                            child = [h('span', {}, '是')]
                                                        } else {
                                                            child = [h('span', {}, '否')]
                                                        }
                                                    } else {
                                                        child = [h('el-input', {
                                                            domProps: {
                                                                value: s.row[$this.fieldName]
                                                            },
                                                            props: {
                                                                value: s.row[$this.fieldName]
                                                            },
                                                            on: {
                                                                input: function(event) {
                                                                    // console.log('on input', event);
                                                                    s.row[$this.fieldName] = event
                                                                    // $this.$emit('input', event)
                                                                }
                                                            }
                                                        })]
                                                    }
                                                } else {
                                                    if ($this.type&&$this.type==='radio') {
                                                        if (s.row[$this.fieldName]) {
                                                            child = [h('span', {}, '是')]
                                                        } else {
                                                            child = [h('span', {}, '否')]
                                                        }
                                                    } else if ($this.type&&$this.type==='yn') {
                                                        if (s.row[$this.fieldName] === '1') {
                                                            child = [h('span', {}, '是')]
                                                        } else {
                                                            child = [h('span', {}, '否')]
                                                        }
                                                    } else {
                                                        child = [h('span', {}, s.row[$this.fieldName])]
                                                    }
                                                }
                                                return h('span', {}, child)
                                            }
                                        },
                                },
                            )
                        },
                    },
                },
            })
        </script>
    </body>
</html>
